组件的状态不断恢复到原来的状态

Question

我有一个具有以下状态的组件（DataGrid）：

    const [rows, setRows] = useState([
        { id: 1, lastName: 'Snow', firstName: 'Jon', status: 'Sold'},
        { id: 2, lastName: 'Lannister', firstName: 'Cersei', status: 'Quoted No Contact'},
    ])

然后我有一个使用“setRows”更新此状态的函数

const statusHandleChange = (e ,id) => {
      setRows(rows.map((row) => row.id === id ? {...row, status: e.target.value}: row))
    };

基本上，当您更新网格中一行的“状态”字段时，它会更新行状态中的相应状态。

它在第一次更新状态时效果很好，如果我将第二行 (id: 2) 更改为“已售”，那么状态将 console.log out 到这里：

{ id: 1, lastName: 'Snow', firstName: 'Jon', status: 'Sold'},
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', status: 'Sold'}

但是，一旦我更改另一行，例如将第 1 行（id：2）更改为状态：'Interested'，然后我更新的上一行将恢复为原始状态。

{ id: 1, lastName: 'Snow', firstName: 'Jon', status: 'Interested'},
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', status: 'Quoted No Contact'} //status switched back to 'Quoted No Contact' instead of the 'Sold' value I originally changed it to

每次我更新状态时，上一行的这种模式总是会恢复到原来的状态。我在这里做错了什么？

Answer 1

您尚未展示如何附加/调用 statusHandleChange，但我的猜测是您应该使用功能状态更新，因为下一个状态数组取决于前一个状态的状态数组。这避免了回调中的任何陈旧状态附件。

const statusHandleChange = (e ,id) => {
  setRows(rows => rows.map((row) => row.id === id ? 
    {
      ...row,
      status: e.target.value
    } : row
  ))
};