setState 一个 JSX 元素数组？答案

【问题标题】：setState an array of JSX elements?setState 一个 JSX 元素数组？
【发布时间】：2021-05-12 01:40:14
【问题描述】：

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

我想在 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 元素的数组？

【问题讨论】：

标签： reactjs components jsx

【解决方案1】：

虽然技术上可能只返回 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>);

【讨论】：

如果它是一个对象数组呢？我如何能够解析 return() 函数中适当的对象？
取决于您希望如何显示对象。例如，如果它是 { first: string, last: string } 的对象，您可以执行类似 => <div>{name.first + ' ' + name.last}</div> 的操作
但是如何在return() 函数中将其转换为对象形式？看来我无法在setFirstNames() 中放置一组对象。我只能将其设置为字符串。
当我尝试做setFirstNames(JSON.parse(response.data.first_names));时，我得到Error: Objects are not valid as a React child
确定你可以让 state 成为一个对象数组..？像const [names, setNames] = useState([]); ... setNames(response.names) 这样的东西绝对没有错，其中names 是一个对象数组

【解决方案2】：


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

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

【讨论】：