React中根据变量更新组件：切换currentTodo时Todo组件消失的解决方法

你的代码有两个关键问题导致Todo组件消失：

问题1：错误的id属性传递 #

原代码中id = {todoList.todoId}是错误的——todoList是数组，不存在todoId属性，应该使用当前匹配的todo对象的todoId，即todo.todoId。

问题2：低效且易出错的遍历方式 #

用map遍历整个数组，仅返回匹配项的组件，其余项返回undefined，虽然React会忽略undefined，但这种写法不够严谨，且当currentTodo变化时，可能因为组件key缺失或遍历逻辑问题导致渲染异常。

修改后的代码 #

function App() {
  const [todoList, setTodoList] = useState([
    {
      todoId: 0,
      todoName: "Personal",
      todoTasks: []
    },
    {
      todoId: 1,
      todoName: "Work",
      todoTasks: []
    },
    {
      todoId: 2,
      todoName: "College",
      todoTasks: []
    }
  ])

  const[currentTodo, setCurrentTodo] = useState(0)

  // 直接找到当前要渲染的todo对象
  const currentTodoItem = todoList.find(todo => todo.todoId === currentTodo)

  return (
    <>
      <Navbar 
        todo={todoList}
        currentTodo={currentTodo}
        setCurrentTodo={setCurrentTodo}
      />
      {/* 找到匹配的todo后再渲染组件，同时添加key属性 */}
      {currentTodoItem && (
        <Todo 
          key={currentTodoItem.todoId}
          currentTodo={currentTodo}
          todoList={todoList}
          setTodoList={setTodoList}
          id={currentTodoItem.todoId}
        />
      )}
      {console.log(currentTodo)}
      {console.log(todoList[currentTodo])}
    </>
  )
}

额外说明 #

• 使用find方法直接定位目标todo对象，比遍历整个数组更高效，逻辑也更清晰。
• 给Todo组件添加key属性，确保React能正确识别组件的更新，避免不必要的卸载和重建。
• 通过currentTodoItem && ...的条件渲染，确保只有找到匹配的todo时才渲染组件，防止渲染undefined。

内容的提问来源于stack exchange，提问作者Anonymous _-