reactjs 在useState中更改对象的值

64jmpszr  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(210)

我有一个包含[{id:123,是否为真:true}]。我在组件中使用props得到的数组。当我的组件挂载时,我必须在其中更改isTrue。我使用useState和useEffect:

const [myArray, setMyArray] = useState([]);
  useEffect(() => {
    setMyArray(arrFromProps.map((item) => {
      item.isTrue = false;
    }));
  }, []);

什么都没有。我不能在我的对象中改变值。你能解释一下为什么吗?谢谢!

roejwanj

roejwanj1#

代码的问题在于,您没有在map()中返回修改后的数组。map()函数通过将提供的函数应用于输入数组的每个元素来创建一个与输入数组长度相同的新数组。但是,您的map()函数没有返回修改后的元素,它只是更改了原始元素的isTrue属性。
你应该修改map()函数返回一个新的对象,并更新isTrue属性,如下所示。

const [myArray, setMyArray] = useState([]);
useEffect(() => {
  setMyArray(arrFromProps.map((item) => {
    return { ...item, isTrue: false };
  }));
}, []);

在map()函数中,我们使用spread操作符({... item})创建一个新对象,以复制原始对象的所有属性,然后将isTrue属性设置为false,这将创建一个包含修改后的对象的新数组,状态也将相应地更新。

相关问题