React中如何向数组推入新对象？当前代码始终替换首个对象

你这段代码的核心问题非常明显：每次触发radioButtonVal函数时，你都把this.radioButtonValTitles重置成了空数组[]。这就意味着不管之前数组里存了多少对象，每次选单选框都会被清空，然后重新添加当前的项——自然永远只能看到最后操作的那个对象，之前的全丢了。

而且还有个隐性问题：你直接用实例属性（this.radioButtonValTitles）来存储数组，即使修复了清空的问题，React也不会监听这个属性的变化，数据更新后组件也不会重新渲染，UI上还是看不到变化。

正确的做法是把这个数组放到React组件的state里管理，同时避免每次函数执行时清空数组。以下是完整的修复代码：

1. 初始化State（在组件构造函数或使用类属性） #

如果是类组件，先在构造函数里初始化state：

constructor(props) {
  super(props);
  this.state = {
    radioButtonValTitles: []
  };
}

或者用类属性语法（需要配置Babel支持）：

state = {
  radioButtonValTitles: []
};

2. 修改radioButtonVal函数 #

radioButtonVal = (e) => {
  const radioid = e.target.name;
  const radiovalue = e.target.value;

  // 使用函数式更新state，因为新状态依赖于旧状态
  this.setState(prevState => {
    // 查找是否已有对应id的项
    const existingItem = prevState.radioButtonValTitles.find(item => item.id === radioid);
    
    if (existingItem) {
      // 若存在，创建新数组替换对应项（保持state不可变性）
      return {
        radioButtonValTitles: prevState.radioButtonValTitles.map(item => 
          item.id === radioid ? { ...item, value: radiovalue } : item
        )
      };
    } else {
      // 若不存在，添加新项到数组末尾
      return {
        radioButtonValTitles: [...prevState.radioButtonValTitles, { id: radioid, value: radiovalue }]
      };
    }
  });
};

• 移除了this.radioButtonValTitles = []：不再每次清空数组，保留之前存储的所有项
• 用state管理数组：React会监听state变化，自动触发组件重新渲染，确保UI和数据同步
• 函数式更新state：因为新的数组状态依赖于旧状态，这种方式能避免异步更新导致的状态不一致问题
• 保持state不可变性：没有直接修改原数组或原对象，而是通过map和扩展运算符创建新的数组/对象，这是React状态管理的最佳实践

这样修改后，你的数组就会持续存储所有单选框的选择项，相同id的项会更新值，不同id的项会被添加进去，最终得到你期望的多个对象组成的数组。

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