在react中提交表单时向数组中添加一个对象

Question

我是react的新手，我只是在玩一些代码来熟悉它。

我将数据存储到对象数组中，就好像我从基于json的API引入它一样。我正在使用状态，所以我可以删除或添加任何项目的数据。

我已经成功地从对象数组中删除了一个元素。为了添加到列表中，我使用了一个表单。我有我的表单设置在form .js.

Form.js

import { useState } from "react";
function Form() {
const [name, setName] = useState("");
const [job, setJob] = useState("");
const submitForm = (e, {handleSubmit}) => {
e.preventDefault();
const newChar = {
name: e.target.name.value,
job: e.target.job.value
}
handleSubmit(newChar);
setName('');
setJob('');
}
return (
<form onSubmit={submitForm}>
<label htmlFor="name">Name</label>
<input
type="text"
name="name"
id="name"
value={name}
onChange={(e) => setName(e.target.value)} />
<label htmlFor="job">Job</label>
<input
type="text"
name="job"
id="job"
value={job}
onChange={(e) => setJob(e.target.value)} />
<input type="submit"/>  
</form>
);
}
export default Form;

在App.js中，我已经初始化了我的对象数组，我有我的函数handlessubmit()，它将通过使用ES6扩展操作符获取现有状态并添加新的字符参数来更新状态。

import { useState } from "react";
import Form from "./Form";
function App() {
const [characters, setCharacters] = useState([
{
name: 'Charlie',
job: 'Janitor',
},
{
name: 'Mac',
job: 'Bouncer',
},
{
name: 'Dee',
job: 'Aspring actress',
},
{
name: 'Dennis',
job: 'Bartender',
},
]);

const removeChar = (id) => {
const newChars = characters.filter(character => characters.indexOf(character) !== id);
setCharacters(newChars);
}
const handleSubmit = (character) => {
setCharacters([ ...characters, character ]);

}
return (
<div className="container">
<Table characters = {characters} removeChar = {removeChar} />
<Form handleSubmit = {handleSubmit} />
</div>
);
}
export default App;

这段代码不起作用。我似乎不明白为什么。如有任何帮助，不胜感激

Answer 1

试试这个

const handleSubmit = (character) => {
let oldArray  = [...characters]
oldArray.push(character)
setCharacters(oldArray);          
}

检查此示例

characters = [
{
name: 'Charlie',
job: 'Janitor',
},
{
name: 'Mac',
job: 'Bouncer',
},
{
name: 'Dee',
job: 'Aspring actress',
},
{
name: 'Dennis',
job: 'Bartender',
},
]

const handleSubmit = (character) => {
let oldArray  = [...characters]
oldArray.push(character)
console.log(oldArray)
//setCharacters([ ...characters, character ]);
}
handleSubmit({name:'Waleed',Job:"HOD"})

Answer 2

所以我找到了问题所在。我在const SubmitForm声明中传递{handlessubmit}，而不是传递给const Form()。这里是代码，如果它可以帮助任何人新的反应。

Form.js

import { useState } from "react";
function Form({handleSubmit}) {
const [name, setName] = useState("");
const [job, setJob] = useState("");

const submitForm = (e) => {

e.preventDefault();
const newChar = {
name: e.target.name.value,
job: e.target.job.value
}
handleSubmit(newChar);
setName('');
setJob('');
}
return (
<form onSubmit={submitForm}>
<label htmlFor="name">Name</label>
<input
type="text"
name="name"
id="name"
value={name}
onChange={(e) => setName(e.target.value)} />
<label htmlFor="job">Job</label>
<input
type="text"
name="job"
id="job"
value={job}
onChange={(e) => setJob(e.target.value)} />
<input type="submit"/>  
</form>
);
}
export default Form;

App.js

import { useState } from "react";
import Form from "./Form";
function App() {
const [characters, setCharacters] = useState([
{
name: 'Charlie',
job: 'Janitor',
},
{
name: 'Mac',
job: 'Bouncer',
},
{
name: 'Dee',
job: 'Aspring actress',
},
{
name: 'Dennis',
job: 'Bartender',
},
]);

const handleSubmit = (character) => {
setCharacters(characters => [...characters, character])
}

return (
<div className="container">
<Form handleSubmit = {handleSubmit} />
</div>
);
}
export default App;