来自对象数组的对象 - 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

我认为您需要在数据中添加电子邮件，然后单击“添加”按钮，将电子邮件存储在People变量中的以前数据中，因此我已经更新了您的代码，并且应该对您有用。

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;