无法从对象数组中筛选出具有特定值的特定对象。反应（待办事项应用程序）

Question

export default function Todos() {
  const [todoState, updateStateTodo] = useState([
    { id: 1, title: "I am a todo object", completed: false },
    { id: 2, title: "I am a todo object 2", completed: false },
    { id: 3, title: "I am a todo object 3", completed: false },
    { id: 4, title: "I am a todo object 4", completed: true },
    { id: 5, title: "I am a todo object 5", completed: false },
  ]);

  function handleChange(e) {
    const newArray = todoState.filter((todo) => todo.id === e.target.value);
    console.log(newArray);
    console.log(e.target.value);
  }

  const todoItemArray = todoState.map((todo) => {
    return (
      <TodoItem title={todo.title} key={todo.id} completed={todo.completed} handleChange={handleChange} id={todo.id} />
    );
  });

  return <div>{todoItemArray}</div>;
}

我加入了 2 个主要组件。一个 todo 项目，它呈现一个特定的项目。还有一个 todos 组件，它将它们全部呈现在一个列表中。我使用基于功能的组件。我的状态存储在我的 todos 组件中的一个钩子中，我的 todo 项从状态的 todos 中定义的道具获取它们的信息。该州的每个“待办事项”都有一个 ID、标题、已完成。我试图找出一种方法来使 handleChange() 工作并现在只使用选中的复选框和那个 todos id 创建一个新数组。我不知道如何将 todo.id 与您单击的实际 todo 的 ID 进行比较。 e.target.value 在您单击的那个控制台中显示为一个数字，但是当我 filter() 时它不起作用。 （filter() 中的 todo.id 正在工作，我测试过）

Answer 1

您希望将单独的处理程序回调传递给每个TodoItem

 const handleChange = (todo) => (e) => {
   let newArray = todoState.filter(element => element.id === todo.id)
   console.log(newArray)
 }

 const todoItemArray = todoState.map((todo) => {
   return (
    <TodoItem title={todo.title} key={todo.id} completed={todo.completed} handleChange={handleChange(todo)} id={todo.id} />
   );
 });