將 Object 添加到帶有 React 表單的數組中

Question

我正在嘗試在我的反應網站上有一個表格，有人可以填寫它，它會在我的列表中添加一個新項目。 我正在嘗試使用“react-hook-form”來做到這一點，這似乎很容易設置和使用。 當我 console.log 並檢查時，它確實捕獲了信息。 我現在正在嘗試將其添加到我的數組中。

App.js（在這個文件中，我有一個帶有對象的數組以及我在道具中傳遞的組件。

import { useState } from 'react';
import './App.css';
import HeroeList from './HeroeList';
import NavBar from './NavBar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import AddHero from './AddHero';
import HeroDetail from './HeroDetail';

function App() {
  const [heroes, setHeroes] = useState([
    { heroName: 'Superman', pic: 'https://cosmicbook.news/sites/default/files/henry-cavill-justice-league-brhv.jpg', powers: 'Flight, Speed, Strength', bio: 'Superman was born on the planet Krypton and was given the name Kal-El at birth. As a baby, his parents sent him to Earth in a small spaceship moments before Krypton was destroyed in a natural cataclysm', id: 1 },
    { heroName: 'Flash', pic:'https://hdqwalls.com/wallpapers/flash-justice-league-unite-2017-on.jpg', powers: 'Super Speed, Time Travel', bio: 'Barry Allen is The Flash, the fastest man alive. Using his super-speed powers, he taps into the Speed Force and becomes a costumed crime-fighter', id: 2},
    { heroName: 'Wonder-Women', pic:'https://images.hdqwalls.com/download/justice-league-wonder-woman-2018-yy-1080x2160.jpg', powers: 'Strength, Speed, Lasso of truth', bio: 'Wonder Woman is the princess Diana, the daughter of Hippolyta, Queen of the Amazons and Zeus, the mightiest of the Gods of Olympus.', id: 3},
    { heroName: 'Batman',pic:'https://images.hdqwalls.com/download/batman-justice-league-unite-2017-qu-720x1280.jpg', powers: 'Super intelligence', bio:'Batman is the superhero protector of Gotham City, a tortured, brooding vigilante dressed as a sort of human bat who fights against evil and strikes fear into the hearts of criminals everywhere.', id: 4}
  ])
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path="/">
            <HeroeList heroes={heroes}/>
          </Route>
          <Route path="/AddHero">
            <AddHero heroes={heroes} setHeroes={setHeroes}/>
          </Route>
          <Route path="/HeroDetail/:id">
            <HeroDetail heroes={heroes}/>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

AddHero.js（在這個文件中，我使用 userForm() 設置了表單）

import { useState } from "react";
import { useForm } from "react-hook-form";

const AddHero = (setHeroes, heroes) => {
    
    const {register, handleSubmit, errors} = useForm()

    const onSubmit = (data) => {
        setHeroes(heroes => [...heroes, data])
        console.log(data)
        
    }

    
    
    return ( 
        <form onSubmit={handleSubmit(onSubmit)}>
                <label>Hero Name:</label>
                <input type="text" name="HeroName" placeholder="Hero-Name" ref={register}/>
                <label>Hero Powers:</label>
                <input type="text" name="HeroPower" placeholder="Hero-Power" ref={register}/>
                <label>Hero Bio:</label>
                <textarea type="text"/>
                <input type="submit"/>
        </form>
     );
}
 
export default AddHero;

我正在嘗試使用 useState 在數組中設置新的 object 。 我收到一個錯誤。

Uncaught (in promise) TypeError: setHeroes is not a function

Answer 1

在 AddHero.js 的第 4 行中，您正在執行以下操作：

const AddHero = (setHeroes, heroes) => {

但是，setHeros 和 hero 沒有被傳遞到組件中。 相反， props object 是。 要解決這個問題，只需將setHeroes, heroes包裹起來：

const AddHero = ({ setHeroes, heroes }) => {

編輯：我還注意到您的 onSubmit 正在使用 function 的返回值，而不是綁定到該 function。

<form onSubmit={handleSubmit(onSubmit)}>

這應該是 function：

<form onSubmit={() => handleSubmit(onSubmit)}>