用地图反应渲染问题

Question

让pendingdatafilterd = data.map((itm, i) => {

const [status, setStatus] = useState(itm.status);


    if (status == 'pending') {



  return (
    <div key={i} >
    <div>{itm.id}</div>
    <div>{status}</div>
    <button onClick={() => { setStatus('finished'); itm.status = 'finished'; setfinishedData(finishedData => [...finishedData, itm]);  }} >finish</button>
  </div>
  )

}



console.log('rendered')

}）

这是我代码的一部分，问题是每次我单击按钮时组件渲染数量都会增加

Answer 1

我认为问题在于您在

useState()

函数中使用

map()

钩子，而没有为

pendingdatafilterd

数组中的每个项目提供唯一的键。 Key 用于标识列表中的每个元素，并确定是否需要重新渲染或是否应更新现有元素。

如果数据数组中的每个项目都是唯一的，则可以使用

itm.id

作为键：

let pendingdatafilterd = data.map((itm, i) => {
  const [status, setStatus] = useState(itm.status);

  if (status === 'pending') {
    return (
      <div key={itm.id}>
        <div>{itm.id}</div>
        <div>{status}</div>
        <button
          onClick={() => {
            setStatus('finished');
            itm.status = 'finished';
            setfinishedData(finishedData => [...finishedData, itm]);
          }}
        >
          finish
        </button>
      </div>
    );
  }

  console.log('rendered');
});