React Native点击完成图标时forEach循环无法修改对应任务状态

问题修复方案 #

你代码一共存在4处需要调整的地方：

1. App.js开头没有导入React的useState、useEffect钩子，运行会直接报错
2. 渲染TaskItem组件时没有传递id、status属性，导致组件无法拿到任务状态切换样式，也无法传递正确的任务id到标记完成函数
3. 调用markTaskDone方法时没有传入任务id，函数无法匹配到要修改的任务
4. markTaskDone方法修改完任务数组后，没有调用setTasks更新状态，React不会触发界面重渲染，所以看不到效果

1. 修正App.js头部导入

// 在App.js最顶部添加这行导入
import React, { useState, useEffect } from 'react';

2. 修正markTaskDone函数

const markTaskDone = (id) => {
  let items = [...tasks]
  items.forEach( (task) => {
    if( task.id === id ) {
      task.status = true 
    }
  })
  // 添加这行更新状态
  setTasks(items)
}

3. 修正TaskItem组件渲染逻辑

找到App.js中渲染TaskItem的部分，修改为以下代码：

<TaskItem 
  index={index + 1} 
  task={task.name} 
  status={task.status}
  id={task.id}
  deleteTask={() => deleteTask(index)} 
  markTaskDone={(id) => markTaskDone(id)}
/>

修改完成后点击done图标即可正常给任务添加删除线效果。

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