无法在简单的 React 应用程序中显示待办事项

Question

我是 React 的新手，我想构建一个简单的待办事项应用程序。我制作了两个组件，一个用于制作待办事项，一个用于显示它。

import { useRef, useState } from "react";
import TodoList from "./TodoList";

function TodoForm() {
  const inputItem = useRef();
  const [itemExist, setItem] = useState(false);

  function submitHandler(event) {
    event.preventDefault();
    setItem(true);
  }

  return (
    <div>
      <form onSubmit={submitHandler}>
        <label>
          Todo-item
          <input name="item" type="text" ref={inputItem}></input>
        </label>
        <input type="submit"></input>
      </form>
      {itemExist && <TodoList item={inputItem.current.value}></TodoList>}
    </div>
  );
}

export default TodoForm;

用于显示 doto 项的组件

function TodoList(props) {
    return (
        <ul>
            <li>{props.item }</li>
        </ul>
  );
}

export default TodoList;

当我提交第一个项目时，我无法添加其他项目。我试图将 itemExist 更改为 false {itemExist && <TodoList item={inputItem.current.value}></TodoList>} 但发生错误。未捕获的错误：重新渲染太多

Answer 1

function TodoForm() {
  const inputItem = useRef();
  const [todos, setTodos] = useState([]);
  function submitHandler(event) {
    event.preventDefault();
    let newTodos = [...todos, { inputItem.current.value }];
    setTodos(newTodos);
  }
  return (
    <div>
      <form onSubmit={submitHandler}>
        <label>
          Todo-item
          <input name="item" type="text" ref={inputItem}></input>
        </label>
        <input type="submit"></input>
      </form>
      {todos.map((todo, i) => {
return(
<TodoList key={`todo_${i}`} item={todo}></TodoList>
)
})}
    </div>
  );
}

无法在简单的 React 应用程序中显示待办事项

Cant display todo items in simple React app

jsx

reactjs