面试题：React 中如何在列表组件里合理管理状态以实现数据动态更新

假设你正在开发一个待办事项列表应用，使用React。列表中的每个待办事项有一个文本内容和一个完成状态。请描述如何将列表数据作为状态进行管理，以及如何实现单个待办事项完成状态的切换，同时保证列表整体的正确渲染。要求说明状态的初始化、更新函数的写法，以及如何在JSX中绑定事件和展示数据。

45.8万热度

难度

前端开发React

状态初始化：

在React组件的constructor或使用useState钩子来初始化状态。假设使用函数式组件和useState：

import React, { useState } from'react';

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React', completed: false },
    { id: 2, text: '完成项目', completed: false }
  ]);
  return (
    // 后续JSX代码
  );
};

export default TodoList;

更新函数写法：
- 要切换单个待办事项的完成状态，需要创建一个更新函数。可以使用map方法遍历todos数组，找到对应的待办事项并更新其completed状态。
```
const toggleTodo = (todoId) => {
  setTodos(todos.map(todo =>
    todo.id === todoId
     ? {...todo, completed:!todo.completed }
      : todo
  ));
};
```

在JSX中绑定事件和展示数据：

遍历todos数组，展示每个待办事项的文本和完成状态，并为每个待办事项绑定toggleTodo函数。

return (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => toggleTodo(todo.id)}
        />
        {todo.text}
      </li>
    ))}
  </ul>
);

上述代码通过useState初始化了待办事项列表数据状态，toggleTodo函数实现了单个待办事项完成状态的切换，在JSX中通过map遍历展示数据并绑定事件，确保列表整体正确渲染。

星途面试题库

面试题：React 中如何在列表组件里合理管理状态以实现数据动态更新

知识考点

面试题答案