React中遍历含嵌套对象的数组问题：map仅返回外层对象

你的核心问题出在handleAddMoreDetails函数的数组更新逻辑上：当前代码每次点击按钮时，不是往数组里追加新的详情对象，而是把原数组（prevState）当作对象展开后覆盖details字段，最后把这个单一对象塞进新数组，导致每次添加都会覆盖之前的内容，数组永远只有一个元素。

修正后的代码 #

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.map((item, index) => <p key={index}>{item.details}</p>)}
  </div>
);

关键修改说明 #

• 把{ ...prevState, details: details }替换为...prevState，用扩展运算符保留原数组的所有元素，再追加新的{ details: details }对象，确保数组能持续累积新增的详情项。
• 原代码中的moreDetails &&判断可以省略，因为空数组执行map不会报错，无需额外判断。

内容的提问来源于stack exchange，提问作者arod1207