Блог

Прежде всего, заранее благодарю вас за помощь. При создании приложения Todo я выполнял операции добавления и удаления в функциональные компоненты, но я не мог создавать другие компоненты. Я был бы рад, если бы вы могли помочь.

TodoItem.js : (Я много пробовал, но не смог сделать его функциональным из-за ошибок.)

 class TodoItem extends Component {
  render() {
    const { id, title } = this.props.todo // I did not understand here what it does.

    return (
      <div>
        <p>
          <input
            type="checkbox"
            onChange={this.props.markComplete.bind(this, id)} // and here too
          />
          {""} {title}{" "}
          <button onClick={this.props.deleteTodo.bind(this, id)}>X </button>{" "}
        </p>{" "}
      </div>
    )
  }
}
  

Addtodo.js : (Я преобразовал его в функциональный, но в нем нет списка входных данных, которые я написал.)

 const Addtodo = () => {
  const [title, setTitle] = useState("")

  const onSubmit = (e) => {  // I made a mistake here, I don't know why there is a problem.
    e.preventDefault()
    setTitle("")
  }

  const onChange = (e) => setTitle(e.target.value)

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        onChange={onChange}
        value={title}
        placeholder="Add todo"
      />
      <input type="Submit" value="Submit" className="btn" />
    </form>
  )
}
  

App.js компонент: (Я смог сделать их функциональными. Я был бы рад, если вы сможете это проверить.)

 const App = () => {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then((res) => setTodos(res.data))
  }, [])

  const markComplete = (id) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
    )
  }

  const deleteTodo = (id) => {
    axios
      .delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then((res) => setTodos([...todos.filter((todo) => todo.id !== id)]))
  }

  // Add Todo
  const Addtodo = (title) => {
    axios
      .post("https://jsonplaceholder.typicode.com/todos", {
        title,
        completed: false
      })
      .then((res) => setTodos([...todos, res.data]))
  }

  return (
    <div className="App">
      <div className="container"> 
        <Header />
        <AddTodo Addtodo={Addtodo} /> // I think I made a mistake here with the props.
        <Todo
          todos={todos}
          markComplete={markComplete}
          deleteTodo={deleteTodo}
        />{" "}
      </div>{" "}
    </div>
  )
}
  

Существует несоответствие между вашим определением компонента addTodo и последующим добавлением вашего компонента addTodo в DOM. В Addtodo.js , у вас есть сигнатура функции в виде:

 const Addtodo = () => {
  

Поэтому компонент Addtodo не ожидает, что в него будут переданы какие-либо реквизиты.

В App.js , вы пытаетесь добавить компонент в DOM с помощью:

 <AddTodo Addtodo={Addtodo} />
  

Итак, вы просите, чтобы компонент отображался с помощью prop с именем Addtodo, но, как указано ранее, в определении компонента он не ожидает получения каких-либо реквизитов.

Вам нужно решить, хотите ли вы / нужен компонент addTodo для получения реквизита.

Если вы хотите, чтобы он получал реквизит addTodo, вы можете изменить определение функции на:

 const Addtodo = ({ AddTodo }) => {
  

Кроме того, убедитесь, что при экспорте компонента Addtodo вы экспортируете его как экспорт по умолчанию, поскольку оболочка в настоящее время несовместима в вашем коде (определена как Addtodo, но пыталась отобразить как addTodo в App.js ). Однако, если это экспорт по умолчанию, это не имеет большого значения. Убедитесь, что ваш оператор импорта для addTodo такой же, как и при визуализации addTodo.

Чтобы быть явным, убедитесь, что у вас есть export default Addtodo в Addtodo.js Убедитесь, что оператор импорта для компонента add todo является тем же самым. Итак, если верхняя часть App.js говорит import AddTodo from './Addtodo' , что затем, когда вы визуализируете компонент позже в файле, это делается <AddTodo /> следующим образом . И если импорт был import Addtodo from './Addtodo' , то компонент отображается как <Addtodo> (оболочка должна быть согласованной)

Я прошу прощения, если это было не самое ясное объяснение, я не уверен, каковы фактические термины для некоторых вещей, на которые я ссылался, но я надеюсь, вы поняли, что я пытался сказать.

Вы можете удалить функцию onSubmit из элемента формы и использовать ее с помощью onClick в элементе button . Попробуйте. Я думаю, что это сработает.