React Native To-Do 应用程序不会在点击时更新状态，但会在另一个状态更新后更新

Question

我尝试使用 React-native 制作一个待办事项应用程序。这是一个使用 typescript 和 expo 的空白反应原生项目。我在 linux 上。

包含 todo 数组的状态会更新，但视图不会相应地呈现，直到我单击输入按钮并更改文本状态。

我有 3 个函数来修改状态 - textChange（用于更新 todoText 状态）、handleAddTask（用于更新包含任务的数组）、rmTask（从任务数组中删除项目）

  const [task, setTask] = useState('');
  const [taskItems, setTaskItems] = useState(["Write a task"]);

  const textChange = (text: string) => {
    setTask(text)
  }

  const handleAddTask = () => {
    taskItems.push(task)

    setTaskItems(taskItems)
    setTask('')
  }

  const rmTask = (index: number) => {
    taskItems.splice(index, 1);
    setTaskItems(taskItems)
  }

以及功能影响的组件

taskItems.map((item, index) => {
 return ( 
   <TouchableOpacity 
    key={index} 
    onPress={()=> rmTask(index)}
   >
  <Task text={item} />
 </TouchableOpacity>)
})

Answer 1

const handleAddTask = () => {
  // taskItems.push(task) <-- Dont mutate state like this !

  setTaskItems([...taskItems, task]). <-- You should use it like this way.
  setTask('')
}

您在不使用 setter 函数的情况下更改状态值。这就是为什么它不能正常工作。当您为任务输入编写新内容时，UI 会重新渲染并显示正确的内容。因为 textChange 函数实现正确并更新了状态。

Answer 2

在两个地方，您直接操作状态而不是使用 setState。 你应该这样做：

//taskItems.splice(index, 1);
//setTaskItems(taskItems)
// -should be
setTaskItems([...taskItems].splice(index, 1))

和

//taskItems.push(task)
//setTaskItems(taskItems)
// -should be
setTaskItems([...taskItems, task])