map 覆盖在数组中的嵌套 object

Question

目前正在尝试对具有多个嵌套对象的数组进行 map。 当我运行 map function 时，它只返回外部 object。

const [moreDetails, setMoreDetails] = useState([]);
const [details, setDetails] = useState("");

const handleAddMoreDetails = () => {
  setMoreDetails((prevState) => [
    {
      ...prevState,
      details: details
    }
  ]);
  setDetails("");
};

return (
  <div className="App">
    <input
      type="text"
      value={details}
      onChange={(e) => setDetails(e.target.value)}
    />

    <button onClick={handleAddMoreDetails}>Add Detail</button>

    {moreDetails &&
      moreDetails.map((item, index) => <p key={index}>{item.details}</p>)}
  </div>
);

这类似于我想要完成的事情。 我希望它在添加时渲染所有这些。 我想这可能是我试图添加新细节的那个

代码沙盒

Answer 1

问题不在于渲染，而在于 state 更新：

setMoreDetails((prevState) => [
  {
    ...prevState,
    details: details
  }
]);

如果prevState是一个数组，例如：

[
  { details: 'first record' }
]

那么在您的 state 更新后会发生什么？ 此更新正在创建一个包含一个 object的数组，其中包含以前的数组和新的 object。 所以新的结果是：

[
  {
    0: {
      details: 'first record'
    },
    details: 'second record'
  }
]

state 的每次更新都将继续创建一个包含一个 object 的数组，将前一个数组嵌套在该 object 中。

相反，创建一个包含前一个数组的元素加上一个新的 object 的数组：

setMoreDetails((prevState) => [
  ...prevState,
  {
    details: details
  }
]);

所以新的 state 将是：

[
  { details: 'first record' },
  { details: 'second record' }
]