反應原生：更新 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)

沒有太在意你的變量名，但這應該讓你走上正軌