reactjs 这是否是更新对象数组状态中属性的正确方法

dwbf0jvd  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(110)

我有下面的代码,我想更新id为1的对象中的name属性。我用代码objArray[1].name = "Xxx"更新。它完美地工作,但这是正确的吗?我应该使用prevState和setObjArray吗?你认为这看起来容易得多?

const [objArray, setObjArray] = useState([
    {
            id:1,
            name:"Eren"
    },
    {
            id:2,
            name:"Eren2"
    },
    {
            id:3,
            name:"Eren3"
    }

])

uz75evzq

uz75evzq1#

不,这是不可取的。您有useState第二个数组元素(setObjArray)用于更新状态。请阅读React useState的文档。有两种基本方法,但没有太大区别。第一种方法;

const changeName = (id, newName) => {
    // map through the array and change the name of the element with the id you are targeting
    const changedArr = objArray.map((element) => {
      if (element.id === id) {
        return {
          ...element,
          name: newName,
        };
      } else {
        return element;
      }
    });
    // set the returned array as you new state 
    setObjArray(changedArr)
  };

第二种方法;

  • 您可以访问以前的状态。这样,您就可以对以前的状态进行更改,并将新数组作为新状态返回。
const newChangeName = (id, newName) => {
    setObjArray((prev) => {
      // map through the array and change the name of the element with the id you are targeting
      // set the returned array as you new state
      return prev.map((element) => {
        if (element.id === id) {
          return {
            ...element,
            name: newName,
          };
        } else {
          return element;
        }
      });
    });
  };

希望这个有用。

ee7vknir

ee7vknir2#

有很多方法可以做到这一点。让我分享一种方法:
1.创建阵列的浅拷贝

let temp_state = [...objArray];

1.创建要变异的元素的浅副本

let temp_element = { ...temp_state[0] };

1.更新您感兴趣的属性

temp_element.name = "new name";

1.把它放回数组中。注意:我们在这里改变了数组,但这就是为什么我们先做了一个副本

temp_state[0] = temp_element;

1.将状态设置为新副本

setObjArray(temp_state);

相关问题