Question

当我尝试使用复选框中的onToggle将状态设置为true时，setState不起作用。

我尝试过控制台登录该功能，该功能可以正常工作，只是状态不会改变。

import CircleCheckBox, { LABEL_POSITION } from 'react-native-circle-checkbox';

const MyTaskItem = (props) => {

    return (

        <CircleCheckBox
            checked={props.taskDone}
            onToggle={props.onToggleCheck}
        />

    );
};

import MyTaskItem from "../../components/MyTaskItem";

export default function MyTasksScreen() {

  const [taskDone, setTaskDone] = useState(false);

  const checkDoneHandler = () => {
    setTaskDone(true);
    console.log(setTaskDone);
  };

  return (
    <View style={styles.screen}>
      <MyTaskInput visible={isAddMode} onAddTask={addTaskHandler} onCancel={cancelTaskAdditionHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={myTasks}
        renderItem={itemData =>
          <MyTaskItem
            id={itemData.item.id}
            onDelete={removeTaskHandler}
            title={itemData.item.title}
            description={itemData.item.description}
            onToggleCheck={checkDoneHandler}
          />}
      />
      <AddTodoButton onPress={() => setIsAddMode(true)} />
    </View>
  );
}

我想在切换复选框时将taskDone的状态更改为true / false。

Answer 1

我想您想更改特定的任务状态，因此首先，您需要传递已切换任务的ID，因此可以像这样重写MyTaskItem：

const MyTaskItem = (props) => {
    const {taskDone, id, onToggleCheck} = props;
    return (
        <CircleCheckBox
            checked={taskDone}
            onToggle={()=>onToggleCheck(id)}
        />
    );
};

然后，您应该处理MyTasksScreen中的项目状态。由于FlatList是PureComponent，因此您需要将更改的状态传递到清单的extraData属性，以通知项目状态已更改。如果您想更改所有项目done的状态，可以这样做：


export default function MyTasksScreen() {

  const [taskDone, setTaskDone] = useState(false);

  const checkDoneHandler = () => {
    setTaskDone(true);
    console.log(setTaskDone);
  };

  return (
    <View style={styles.screen}>
      <MyTaskInput visible={isAddMode} onAddTask={addTaskHandler} onCancel={cancelTaskAdditionHandler} />
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={myTasks}
        extraData={taskDone}
        renderItem={itemData =>
          <MyTaskItem
            id={itemData.item.id}
            onDelete={removeTaskHandler}
            taskDone={taskDone}
            title={itemData.item.title}
            description={itemData.item.description}
            onToggleCheck={checkDoneHandler}
          />}
      />
      <AddTodoButton onPress={() => setIsAddMode(true)} />
    </View>
  );
}

Answer 2

我建议您使用TypeScript。

从您添加的代码来看，您似乎没有将taskDone发送到MyTaskItem组件。

此外，请尝试在此行之后添加console.log(taskDone)：const [taskDone, setTaskDone] = useState(false);

如何通过切换复选框设置状态？

2 个答案: