如何向数组末尾添加对象？React代码生成单元素对象求修正

看起来你踩了React状态更新里的一个常见小坑——每次添加新元素时，你都直接创建了一个只包含当前处理后对象的新数组，而不是在原有数组的基础上追加元素，再加上初始状态的wok是null，这就导致每次更新后数组里只有最后一个添加的元素。

我来帮你修正代码，分两种情况说明：

情况1：推荐的初始状态设置 #

首先把初始的wok设为空数组（而不是null），这样后续处理数组逻辑会更顺畅：

// 初始状态把wok设为空数组
const [wokSummary, setWokSummary] = useState({ wok: [] });

const onAdded = item => {
  // 使用函数式更新获取最新状态，避免异步更新导致的旧值问题
  setWokSummary(prevState => ({
    // 展开原数组的所有元素，再把新item追加到末尾
    wok: [...prevState.wok, item]
  }));
};

情况2：必须保留初始wok为null的场景 #

如果因为业务需求，初始wok必须是null，那我们需要在更新时先判断原状态：

const [wokSummary, setWokSummary] = useState({ wok: null });

const onAdded = item => {
  setWokSummary(prevState => ({
    // 原wok存在就追加，不存在就创建包含当前item的数组
    wok: prevState.wok ? [...prevState.wok, item] : [item]
  }));
};

关键修正点说明： #

• 函数式更新：用prevState来获取最新的状态值，因为React的状态更新是异步批量处理的，直接引用wokSummary可能拿到的是未更新的旧值。
• 数组扩展运算符：[...prevState.wok, item]会创建一个新数组，包含原数组的所有元素和新添加的item，这符合React状态不可变的原则，同时实现了追加元素的效果。

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