Question

嗨，伙计，我是反应的新手。我正在做简单的待办事项应用程序有 3 个组件：todo、todoform、todolist。我的 todolist 会调用 todo，todoform。我在stackoverflow上研究了很多方法，但没有用。 removeTodo,updateTodo 逻辑我在 todolist 中编码我在待办事项组件中的代码：

function Todo() {
    const Todo = ({ todos, completeTodo, removeTodo, updateTodo }) => {
        const [edit, setEdit] = useState({
          id: null,
          text: ''
        });

        const submitUpdate = text=> {
            updateTodo(edit.id, text);
            setEdit({
              id: null,
              text: ''
            });
          };

          if (edit.id) {
            return <TodoForm edit={edit} onSubmit={submitUpdate} />;
          }     
    return (todos.map((todo, index) => (
       
          
        <div className="showlist"
          key={index}>
        
            
          <div key={todo.id} onClick={() => completeTodo(todo.id)}>
            {todo.text}
          </div>
          <div className='icons'>
            <RiCloseCircleLine
              onClick={() => removeTodo(todo.id)}
              className='delete-icon'
            />
            <TiEdit
              onClick={() => setEdit({ id: todo.id, text: todo.text })}
              className='edit-icon'
            />
          </div>
        </div>
      
          ))
     
     
    );
}
};

export default Todo

Answer 1

我根据上面 Anish 的建议自行修复，检查 .map()

Todo(...).render 没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

1 个答案: