Почему мой ввод все еще остается после того, как я нажму «Отправить»?

Question

После того, как я ввожу поле поиска и нажимаю кнопку, введенные мной данные все еще остаются в поле поиска. Мне прислали ошибку: « TypeError: todos не повторяется onFormSubmit ». Я установил uuid. Что-то не так с моими кодами? Кто-нибудь может мне помочь? Большое спасибо!

Это мой Form.js:

      import React from "react";
import { v4 as uuidv4 } from "uuid";

function Form({ input, setInput, todos, setTodos }) {
  const onInputChange = (event) => setInput(event.target.value);
  const onFormSubmit = (event) => {
    event.preventDefault();
    setTodos([
      ...todos,
      {
        id: uuidv4(),
        title: input,
        completed: false,
      },
    ]);
    setInput("");
  };
  return (
    <form onSubmit={onFormSubmit}>
      <div>
        <input
          type="text"
          placeholder="add a todo..."
          value={input}
          required
          onChange={onInputChange}
        />{" "}
        <button className="button-add" type="submit">
          {" "}
          add{" "}
        </button>{" "}
      </div>{" "}
    </form>
  );
}

export default Form;

Это мой App.js:

      import React, { useState } from "react";
import "./App.css";
import Header from "./components/Header";
import Form from "./components/Form";
import TodoList from "./components/TodoList";

function App() {
  const [input, setInput] = useState("");
  const [todos, setTodos] = [];
  return (
    <div>
      <div className="container">
        <div className="app-wrapper">
          <div>
            <Header />
            <Form
              input={input}
              setInput={setInput}
              todos={todos}
              setTodos={setTodos}
            />{" "}
            <TodoList todos={todos} setTodos={setTodos} />{" "}
          </div>{" "}
        </div>{" "}
      </div>{" "}
    </div>
  );
}
export default App;

Answer 1

Вы не используете перехватчик useState внутри файла App.js.

      function App(){
    const [todos, setTodos] = useState([]);
}

Попробуй это.

Answer 2

В вашем App.js -> функция App()

изменение

const [todos, setTodos] = [];

к

const [todos, setTodos] = useState([]);