表单未呈现答案

【问题标题】：Form is not rendered表单未呈现
【发布时间】：2021-12-07 04:42:10
【问题描述】：

我正在制作一个待办事项应用程序并使用 useState 将值传递给表单然后提交待办事项但由于某些原因我的待办事项表单没有呈现并且我不知道我的代码中缺少什么，请帮助我查看！非常感谢！

import React, { useState } from "react";

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

function todoForm(addTodo) {
  const [value, setValue] = useState("");

  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);
          }}
        />
      </form>
    </div>
  );
}

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

  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;

链接沙盒：https://codesandbox.io/s/serverless-bash-ef4hk?file=/src/App.js

【问题讨论】：

标签： react-hooks use-state

【解决方案1】：

JSX 标记必须大写才能被编译器正确解析为 React 组件。

请使用TodoForm，而不是todoForm。

大写的类型表示 JSX 标签是指一个 React 组件。这些标签被编译成对命名变量的直接引用，所以如果你使用 JSX 表达式，Foo 必须在范围内。

发件人：https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

另外，您需要解构 TodoForm 内部的 props 才能访问 addTodo：

// Bad
function TodoForm(addTodo) {...}

// Good
function TodoForm({addTodo}) {...}

您还应该将处理程序分配给 consts：

// Bad
addTodo = (text) => {...};

// Good
const addTodo = (text) => {...};

【讨论】：

【解决方案2】：

你的问题解决了

APP.JS

import React, { useState } from "react";

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

function todoForm(addTodo) {
  const [value, setValue] = useState("");

  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);
          }}
        />
      </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 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)}
      </div>
    </div>
  );
}
export default App;

【讨论】：