React Native 中如何正确更新对象数组内的指定项属性

两种写法的差异与生效原因 #

第一种写法（看似可用，不符合React规范） #

• 你从state中解构拿到的list是原状态数组的引用，直接修改list[objIndex].isComplete本质是直接修改state原值，属于React官方不推荐的可变状态操作。
• 它能正常显示更新的前提是后续有其他setState操作或者父组件重渲染触发了当前组件更新，修改原state本身不会自动触发组件重渲染，这种写法存在状态不一致的隐患，不推荐生产环境使用。

第二种写法（运行错误） #

你犯了基础逻辑错误：新建空数组listStore后，仅把修改后的单个待办项推入这个数组，之后直接用这个只有1个元素的数组覆盖了原state的完整list数组，所有未匹配到的待办项都被你丢弃了。你观察到的「移除最后一个对象」只是测试场景下的巧合（比如原数组只有2个元素，修改第一个之后新数组只剩第一个，看起来像丢了最后一个），实际除了你修改的那一项，其他所有项都被移除了。

符合React规范的正确写法 #

React要求状态更新遵循不可变原则，不能直接修改原state的值，要生成全新的状态数据再替换，正确实现如下：

case 'todo_update':
    const { list } = this.state;
    const targetId = data.dbResponse._id;
    // map生成全新数组，不修改原state
    const newList = list.map(item => {
        if (item._id === targetId) {
            // 匹配到目标项时生成新对象修改属性，避免修改原对象
            return {
                ...item,
                isComplete: data.dbResponse.isComplete
            }
        }
        // 非目标项直接返回
        return item;
    })
    // 用新数组更新state，触发重渲染
    this.setState({ list: newList });
    break;

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