ReactJS：如何更新数组 state 中的数据

Question

    const [rowData, setRowData] = useState([]);
    const old = {id: 'stud1', name: 'jake', room: '2'};
    const newData = {name: 'jake', room: '3A'};

    useEffect(() => {
        let ignore = false;
        (async function getUsers() {
          let response = await getAll({ length: 999 });
          if (!ignore) setRowData(response['data']['data']);
        })()
        return () => {
          ignore = true;
        }
      }, []);

    (async function updateItem() {
              await update(oldData.id, newData).then(response => {
//value of response['data'] = {id: 'stud1', name: 'jake', room: '3A'}
                setRowData(arr => [...arr, response['data']]);
              }).catch(err => {
                console.log(err);
              })
            })()

如何在不附加新数据的情况下更新数组列表。 因为我试过这个setRowData(arr => [...arr, response['data']]); 然后它继续附加数据。

相反，它将更新数组中的值，它将 append 放在上面。

Answer 1

由于您想更新 state 数组中的一项，您可以使用 map 并根据下面的 id 更新该项

  (async function updateItem() {
      await update(oldData.id, newData).then(response => {
        setRowData(arr => arr.map(item => {
                if (item.id === response.data.id) {
                     return response.data;
                }
                return item;
         });
      }).catch(err => {
        console.log(err);
      })
    })()

Answer 2

我不认为你需要一个传播运算符..你可以使用 array.map()..也许这样的东西会帮助你..

const old = [{id: 'stud1', name: 'jake', room: '2'},{id: 'stud2', name: 'jack', room: '2'}];
const newData = {id: 'stud1', name: 'jakey', room: '3A'};

const x = old.map((stud) => {
  if(stud.id === newData.id){
    stud = newData;
  }
  return stud;
});
console.log(x);

那么您可以将 x 用于 setRowData(x)