React待办事项应用开发中todo表单未渲染问题排查求助

问题排查与修复 #

你代码里共有3个核心错误导致表单不渲染/功能异常：

• React自定义组件必须以大写字母开头，你定义的todoForm是小写，React会将其识别为原生HTML标签，不会渲染对应的组件内容，需要重命名为TodoForm，调用时也要对应改为<TodoForm />
• 组件接收props时要做结构处理，你写的function todoForm(addTodo)是把整个props对象赋值给了addTodo变量，调用时会报错，要改成function TodoForm({ addTodo })直接解构出传入的addTodo方法
• 所有自定义函数（handleSubmit、addTodo）没有加变量声明，非严格模式下会挂载到全局，严格模式直接报错，需要加上const声明

import React, { useState } from "react";

function Todo({ todo, index }) {
  console.log("hiiii");
  return (
    <div>
      <p>{todo.text}</p>
    </div>
  );
}

// 组件名大写 + 解构props
function TodoForm({ addTodo }) {
  const [value, setValue] = useState("");

  // 添加const声明函数
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="add new todo"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
        <button type="submit">添加</button>
      </form>
    </div>
  );
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: "eat lunch",
      isCompleted: false
    },
    {
      text: "do homework",
      isCompleted: false
    },
    {
      text: "go to school",
      isCompleted: false
    }
  ]);

  // 添加const声明函数
  const addTodo = (text) => {
    console.log("hey");
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  return (
    <div>
      <div>
        {todos.map((todo, index) => {
          return <Todo key={index} index={index} todo={todo} />;
        })}
      </div>
      <div>
        {/* 用大写的组件名调用 */}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}
export default App;

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