React.js中如何向state对象内的数组属性添加新元素？

问题根因 #

• 1. setState调用时覆盖了原state结构：你初始定义的state是包含externalEvents字段的对象，但你在addTodo里直接给setState传了数组，导致state整体变成数组，state.externalEvents自然变成undefined，调用map就报错了。
• 2. 新对象属性多套了一层括号：你写的{title:{title}, color: {color}, custom: {custom}}会让每个属性的值变成对象而非字符串，和你初始定义的结构不一致。
• 3. 下拉选择逻辑错误：option的value属性不能直接绑定函数，当前写法无法正确获取选中的颜色值。
• 4. 新增对象缺少唯一id：你渲染时用event.id作为key，新增的对象没有id属性会触发React警告，也可能影响FullCalendar的事件识别。

修正方案 #

1. 修正下拉选择部分的代码 #

给select绑定onChange事件，option直接存颜色值：

<select value={color} onChange={e=>setColor(e.target.value)}>
  <option value="blue">blue</option>
  <option value="orange">orange</option>
  <option value="green">green</option>
  <option value="purple">purple</option>
</select>

2. 修正addTodo处理函数 #

保持state的结构不变，正确更新externalEvents数组，补充唯一id：

const addTodo = (e) =>{
  e.preventDefault();
  setState(prevState => ({
    ...prevState,
    externalEvents: [
      ...prevState.externalEvents,
      {
        title,
        color,
        custom,
        id: Date.now() // 临时生成唯一id，生产环境可换更可靠的生成方案
      }
    ]
  }))
  setTitle('')
  setCustom('')
}

3. 可选优化（避免偶发报错） #

渲染时增加可选链判断，防止state未初始化完成时报错：

<div id="external-events">
  {state?.externalEvents?.map((event) => (
    <div 
      className="fc-event"
      title={event.title}
      data-id={event.id}
      data-color={event.color}
      data-custom={event.custom}
      key={event.id}
      style={{
        backgroundColor: event.color,
        borderColor: event.color,
        cursor: "pointer"
      }}
    >{event.title}</div>
  ))}
</div>

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