React l oop с useState - PullRequest
Новая
       49

React l oop с useState

0 голосов
/ 30 мая 2020

Я пытаюсь взять задачу и добавить ее к объекту задач, вы можете сказать мне, в чем проблема?

Newb ie в React. 

import React, { useState } from "react"

function Content() {
  const [todo, setTodo] = useState("") // todo: user input
  const [todos, setTodos] = useState({}) // todos: object

  function handleClick(e) {
    e.preventDefault()
    setTodos({ ...todo, todos })
  }
  return (
    <>
      <h1>Todos</h1>
      <form>
        <input onChange={(e) => setTodo(e.target.value)} type="text" placeholder="Add Todo Here" />
        <button onClick={handleClick}>Add</button>
      </form>
      {console.log(todos)}
      {todos.map((todo) => todo)}
    </>
  )
}

export default Content

1 Ответ

0 голосов
/ 30 мая 2020 
    function Content() {
  const [todo, setTodo] = useState("") // todo: user input
  const [todos, setTodos] = useState([]) // todos: object

  function handleClick(e) {
    e.preventDefault()
    setTodos([ ...todos, todo ])
  }
  return (
    <>
      <h1>Todos</h1>
      <form>
        <input onChange={(e) => setTodo(e.target.value)} type="text" placeholder="Add Todo Here" />
        <button onClick={handleClick}>Add</button>
      </form>
      {console.log(todos)}
      {todos.map((todo) => todo)}
    </>
  )
}


export default function App() {
  return (
    <div className="App">
      <Content />
    </div>
  );
}

Вы смешали задачи и задачи .. Вы пытались распространить задачу, которая является строкой, а не массивом.

и, кроме того, вы неправильно установили массив. это должно быть [] не {}. :)

вот песочница кода с рабочим примером: https://codesandbox.io/s/modest-cerf-soxii

вот разница между вашим и моим кодом: https://www.diffchecker.com/nBReZt19

...