点击按钮向state数组添加带唯一索引重复项的问题排查

API 探路者

2026-8-22

问题分析与解决方案

问题根源

你遇到的核心问题是对象引用复用：

你在外部定义的newItem是一个固定对象，每次点击按钮时只是修改它的index属性，再把这个对象添加到数组里。但数组中存储的都是同一个对象的引用，所以所有元素共享同一个index值，每次修改都会同步到数组里的所有元素。
另外，直接用this.state.counter更新计数器存在风险，因为setState是异步操作，连续调用时可能拿到的还是旧的计数器值。

修复后的代码

方案1：拆分更新（每次点击创建新对象）

state: {
    items: [],
    counter: 0,
}

onclick = () => {
    // 每次点击都创建全新的对象，避免引用复用
    const newItem = { index: this.state.counter, val: "a" };
    
    this.setState(prevState => ({
        items: [...prevState.items, newItem]
    }), () => {
        console.log(this.state.items); // 注意原代码里的rowData应该是items
    });
    
    // 用函数式更新计数器，确保拿到最新的state值
    this.setState(prevState => ({
        counter: prevState.counter + 1
    }));
}

方案2：合并state更新（更高效）

可以把数组和计数器的更新合并成一次setState，减少异步更新的不确定性：

onclick = () => {
    this.setState(prevState => {
        const newItem = { index: prevState.counter, val: "a" };
        return {
            items: [...prevState.items, newItem],
            counter: prevState.counter + 1
        };
    }, () => {
        console.log(this.state.items);
    });
}