Блог

После того, как я ввожу в поле поиска и нажимаю кнопку, мои данные все еще остаются в поле поиска. Мне дали ошибку как «Ошибка типа: todos не может быть повторен на formsubmit«. Я установил 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;
 

В вашем App.js -> функциональное приложение()

менять

const [todos, setTodos] = [];

Для

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

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

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

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