React中useState修改数组对象属性未生效，求原因解析

核心问题 #

你的代码存在两个关键问题，导致无法获取更新后的属性值：

• map函数未返回有效内容：当前map的回调仅修改了item.isTrue，但没有返回任何值。map会根据回调返回值生成新数组，此时生成的数组元素全是undefined，调用setMyArray后，myArray里的元素都是undefined，自然无法读取isTrue属性。

• 直接修改原props对象：直接给item.isTrue = false是修改了props传入的原始对象，这违反了React中props只读的设计原则，可能引发意外的状态污染或组件更新异常。

修复后的代码 #

const [myArray, setMyArray] = useState([]);
useEffect(() => {
  // 通过扩展运算符创建新对象，不修改原props的item，同时返回新对象
  setMyArray(arrFromProps.map((item) => ({ ...item, isTrue: false })));
}, [arrFromProps]); // 添加arrFromProps到依赖数组，props变化时重新执行更新逻辑

修复说明 #

1. 让map返回有效对象：用对象扩展运算符...复制原item的所有属性，再覆盖isTrue为false，确保map生成的是包含有效对象的新数组。
2. 添加正确的依赖项：将arrFromProps加入useEffect的依赖数组，当props中的数组发生变化时，组件能重新执行更新逻辑，保证myArray与props数据同步。
3. 遵循不可变数据原则：创建新对象而非直接修改原props对象，避免副作用，符合React的状态管理规范。

内容的提问来源于stack exchange，提问作者elarri