React.js按id修改数组元素失效，点击按钮变为新增问题如何解决

• 核心逻辑错误：setCarsState([...carsState, newItem])的写法仅会将新元素追加到原数组末尾，没有实现同id元素的匹配替换逻辑，因此无法修改原有匹配id的元素。
• 隐藏问题：列表渲染时使用c.name作为key属性不符合React最佳实践，name不具备全局唯一性，后续出现重名元素时会导致渲染异常，建议改用唯一的c.id作为key值。

修改click函数的状态更新逻辑，先遍历查找第一个和新元素id相同的元素，找到则替换，未找到再追加即可，推荐使用函数式更新避免闭包导致的状态过期问题：

import "./styles.css";
import React from 'react';
const carsData = [
  {name: "first car", id: 1, meta: [{id:1, title:'first meta'}]},
  {name: "second car", id: 2, meta: [{id:2, title:'second meta'}]},
  {name: "third car", id: 3, meta: [{id:4, title:'last meta'}]},
]

export default function App({cars = carsData}) {
  const [carsState, setCarsState] = React.useState(cars) 
  const newItem = {name: "first car", id: 1, meta: [{id:10, title:'added meta'}]}
  
  const click = () => {
    setCarsState(prevState => {
      // 查找第一个匹配id的元素下标
      const matchIndex = prevState.findIndex(car => car.id === newItem.id)
      if (matchIndex === -1) {
        // 无匹配项时追加新元素
        return [...prevState, newItem]
      }
      // 有匹配项时替换对应位置的元素
      const updatedState = [...prevState]
      updatedState[matchIndex] = newItem
      return updatedState
    })
  }

  return (
    <div className="App">
      <button onClick={click}>click</button>
      {
        carsState.map(c => {
          return <p key={c.id}>{c.name} - meta:
           {c.meta.map((m, k) => <span key={k}>{m.title}</span>)}</p>
        })
      }
    </div>
  );
}

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