在React中用Form将Object添加到数组中

Question

我试图在我的反应网站上有一个表单，有人可以填写，它会在我的列表中添加一个新项目。我尝试使用"react-hook-form"来做到这一点。这似乎很容易设置和使用。当我执行console.log并检查时，它确实捕获了信息。我现在正试图将它添加到我的数组中。

App.js(在这个文件中，我有一个数组，其中包含了我的组件，我已经在props中传递了。

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来设置数组中的新对象。我得到一个错误。

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

Answer 1

在AddHero.js的第4行，你正在做:

const AddHero = (setHeroes, heroes) => {

然而，setHeros和heroes并没有被传递到组件中。相反，props对象是。要解决这个问题，只需将setHeroes, heroes用花括号括起来:

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

编辑:我还注意到你的onSubmit使用函数的返回值，而不是绑定到该函数。

<form onSubmit={handleSubmit(onSubmit)}>

应该是一个函数:

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