对象数组中的对象- React - useState

Question

请帮助我想在不覆盖的情况下为状态添加值。目前，在添加值时，会覆盖数组。我想使用useState，我想使用表单中的值。

import {useState} from 'react';
const initialState = {
people: [
{email: 'Jan'},
{email: 'Izabela'},
{email: 'Michael'}
] }
const StateModification = () => {
const [names,setNames] = useState(initialState)
const handleSubmit = (e) => {
e.preventDefault(); 
}
const handleChange2 = (e) => {
setNames({
...names,
people: [{[e.target.name]: e.target.value}]
})
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>E-mail</label>
<input 
id='email' 
type='text' 
name='email'
value={names.email}
onChange={handleChange2}    
/>

<button type='submit'>Add</button>
</form>
</div>`enter code here`
) }
export default StateModification;

Answer 1

我认为你需要在你的数据中添加一个电子邮件，点击添加按钮后，电子邮件将存储在人的变量与你以前的数据，所以我已经更新了你的代码，它应该为你工作。

import {useState} from 'react';
const initialState = {
people: [
{email: 'Jan'},
{email: 'Izabela'},
{email: 'Michael'}
] }
const StateModification = () => {
const [names,setNames] = useState(initialState)
const [email,setEmail] = useState("")
const handleSubmit = (e) => {
e.preventDefault();
setNames({
people: [...names.people, { email }]
})
}
const handleChange2 = (e) => {
e.preventDefault();
setEmail(e.target.value)
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>E-mail</label>
<input 
id='email' 
type='text' 
name='email'
value={email}
onChange={handleChange2}    
/>

<button type='submit'>Add</button>
</form>
</div>
) }
export default StateModification;