Question

在 React 中更新对象数组内的对象属性

2022-03-15

1290

javascript reactjs

我使用的是 React 的较新版本，并尝试更改数组中对象的状态。目前，我将对象从数组中拉出，更改该对象中的属性，然后再次将新对象添加到状态中。问题是它将对象发送到列表的后面并重新排序我的复选框输入。

  const handleChange = (e) => {

    if (e.target.type === "checkbox") {

      // Get the role from the current state
      const roleToChange = input.roles.find(
        (role) => Number(role.id) === Number(e.target.id)
      );

      // Change checked state to opposite of current state
      const changedRole = { ...roleToChange, checked: !roleToChange.checked };

      // Get every role except the one that was changed
      const newRoles = input.roles.filter(
        (role) => Number(role.id) !== Number(e.target.id)
      );

      // Update the role in the state
      setInput((prevState) => {
        return { ...prevState, roles: [...newRoles, changedRole] };
      });
    }

我可以就地更新数组中的对象以避免这种情况发生吗？

Answer 1

不要使用 .filter - 而要使用 .map ，并在 ID 匹配的情况下返回更改的对象，因此新对象将放置在新数组中与原始位置相同的位置。

const handleChange = (e) => {
    if (e.target.type !== "checkbox") {
        return;
    };

    const newRoles = input.roles.map((role) =>
        Number(role.id) !== Number(e.target.id)
          ? role
          : { ...role, checked: !role.checked }
    );

    setInput((prevState) => {
        return {
            ...prevState,
            roles: newRoles
        };
    });
}

除非在此之前同步更新状态，这听起来有点不可能（但并非不可能），否则您也可以使用 setInput({ ...input, role: newRules }) 代替回调。