反应原生：更新 state 中数组中 object 的值

Question

我有一个组件在选中复选框时更改 state 并且需要更新数组中 object 的数据。

组件 state 看起来像这样 { key:1, todo:"Something", isChecked:false }

我有 3 个文件： AddTodo.js 将 state 和 setState 传递给组件 TodoList，该组件将子组件 TodoItem 传递给它。

I am unable to update the state from TodoItem, I need to implement a function that finds the object from array and updates its isChecked state.

AddTodo.js

function AddTodo() {
  const [state, setState] = useState(false);
  const [todos, addTodos] = useState([]);
  var keys = (todos || []).length;

  return (
    <View style={styles.container}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={state}
        statusBarTranslucent={true}
      >
        <View style={styles.itemsContainer}>
          <GetInfoDialog
            state={state}
            stateChange={setState}
            addItem={addTodos}
            numKeys={keys}
          />
        </View>
      </Modal>
      {(todos || []).length > 0 ? (
        <TodoList data={todos} updateState={addTodos} />
      ) : null}
      <TouchableOpacity
        style={styles.btn}
        onPress={() => {
          setState(true);
        }}
      >
        <Text style={styles.text}>Add New</Text>
      </TouchableOpacity>
    </View>
  );
}

TodoList.js

function TodoList(props) {
  return (
    <View style={styles.todoList}>
      <FlatList
        data={props.data}
        renderItem={({ item }) => {
          console.log(item);
          return (
            <TodoItem
              list={props.data}
              itemKey={item.key}
              todo={item.todo}
              isChecked={item.isChecked}
              updateState={props.updateState}
            />
          );
        }}
        backgroundColor={"#000000"}
        alignItems={"center"}
        justifyContent={"space-between"}
      />
    </View>
  );
}

TodoItem.js

function TodoItem(props) {
  const [checked, setCheck] = useState(props.isChecked);

  return (
    <View style={styles.todoItem}>
      <Checkbox
        value={checked}
        onValueChange={() => {
          setCheck(!checked);
        }}
        style={styles.checkbox}
      />
      <Text style={styles.text}>{props.todo}</Text>
    </View>
  );
}

Answer 1

根据React Native Hooks你必须调用

useEffect(() => {
    setCheck(checked);
}, [checked]) // now this listens to changes in contact

在 TodoItem.tsx 中

Answer 2

renderItem={({ item, index }) => {
          console.log(item);
          return (
            <TodoItem
              list={props.data}
              itemKey={item.key}
              todo={item.todo}
              isChecked={item.isChecked}
              updateState={props.updateState}
              setChecked={(value)=>{
                let updatedList = [...yourTodosList]
                updatedlist[index].isChecked=value
                setTodos(updatedList)
              }}
            />
          );
        }}

在你的待办事项中

onValueChange={(value) => {
     props.setChecked(value);
}}

我也不认为你需要在你的 todo 组件中检查 state 因为你是通过道具传递的（所以删除const [checked, setCheck] = useState(props.isChecked)行，只使用你得到的值props.isChecked)

没有太在意你的变量名，但这应该让你走上正轨