React Native：更新状态数组中对象的属性值

问题根源 #

你的TodoItem组件维护了独立的本地checked状态，导致它与父组件AddTodo中todos数组的isChecked值脱节，且未触发父组件的状态更新逻辑来同步数组数据。

修改方案 #

1. 重构TodoItem.js，移除本地状态并触发父组件更新

删除组件内的本地状态，直接依赖父组件传递的isChecked，并在复选框切换时更新父数组：

function TodoItem(props) {
  return (
    <View style={styles.todoItem}>
      <Checkbox
        value={props.isChecked}
        onValueChange={(newValue) => {
          // 不可变更新数组：找到目标项并修改isChecked
          const updatedTodos = props.list.map(item => 
            item.key === props.itemKey 
              ? {...item, isChecked: newValue} 
              : item
          );
          // 调用父组件的状态更新函数
          props.updateState(updatedTodos);
        }}
        style={styles.checkbox}
      />
      <Text style={styles.text}>{props.todo}</Text>
    </View>
  );
}

2. 优化AddTodo.js的状态命名（可选）

addTodos命名易混淆，建议改为setTodos更贴合状态更新的语义：

// 原状态声明
const [todos, addTodos] = useState([]);
// 修改为
const [todos, setTodos] = useState([]);

// 对应传递给子组件的属性更新
<TodoList data={todos} updateState={setTodos} />
// 同时确保GetInfoDialog组件的addItem属性也改为setTodos（内部添加新项时需用`prev => [...prev, newTodo]`的方式）

核心逻辑说明 #

• 采用不可变更新：通过map创建新数组，仅修改目标项的isChecked值，符合React状态不可直接修改的原则。
• 移除本地状态：让TodoItem完全由父组件状态驱动，从根源避免状态不同步问题。

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