setState 一个 JSX 元素数组？

Question

在我的函数组件中，我有一个 <div> 数组，我是使用 axios 调用的响应创建的。

我想在 return() 函数中渲染那些 div。他们保持 <div>s 很重要。

这种尝试似乎没有用。我收到有关数组不是 React 的适当子项的错误。

      const [firstNames, setFirstNames] = setState([])
      ....
      let firstNamesArray = JSON.parse(response.data.first_names)
      let newArr = []

      firstNamesArray.forEach(element => newArr.push(<div>{element}</div>));
      setFirstNames(newArr)

      ....
      return (
         {firstNames}
      }

有没有办法像上面的例子那样在一个变量中渲染一组 s 或其他 JSX 元素？

Answer 1

虽然 技术上可行 到 return 只是 JSX 元素的数组：

return firstNames;

状态不应由 JSX 元素组成。相反，将 first_names 数组（字符串？）设置为状态，然后仅在渲染时将状态映射到 <div>s：

setFirstNames(JSON.parse(response.data.first_names));

// choose some appropriate key here...
return firstNames.map((name, i) => <div key={i}>{name}</div>);

Answer 2


const firstNamesArray = JSON.parse(response.data.first_names)

return firstNamesArray.map((element, index) => (<div key={index}>{element}</div>))

setState 一个 JSX 元素数组？

setState an array of JSX elements?

components

jsx

reactjs