向对象添加新内容

Question

我在尝试将数据存储在数组中时遇到了一些问题。我创建了一个我多次使用的组件输入。每个输入存储关于用户的不同数据。我想格式化一个对象，其中所有这些信息将以 json 类型存储。为此，我使用 react context。但问题是，每次我在字段中写入数据时，前一个数据都会被删除。我知道如何在前一个状态之后插入数组，但在对象的情况下，...prevState 不起作用。此外，如何在 json 中使用我传递的标签作为道具？因为我认为 label 它实际上会获取 props 值，但它没有，它只是用 label.

填充数据

这是组件

type Label = {
    label: string
    type: string
}

export const Forms = ({ label, type }: Label) => {    
    const {userData, setUserData} = useContext(RegisterContext)

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        e.preventDefault()
     // setUserData(prev => [prev, e.target.value])  this is what I used to do with array
        setUserData({type: e.target.value})
    }

    return (
        <div className="flex flex-col w-64">
            <span className="text-appiness-darkblue">{label}</span>
            <input onChange={handleChange} type={type} className="rounded-md bg-appiness-green focus:outline-none focus:ring focus:border-appiness-darkblue"/>
        </div>
    )
}

我就是这样称呼它的

<div className="grid grid-cols-2 justify-items-center w-5/12">
    <Forms type="text" label="Username"/>
    <Forms type="string" label="First name"/>
    <Forms type="string" label="Last name"/>
    <Forms type="string" label="Email"/>
    <Forms type="password" label="Password"/>
    <Forms type="date" label="Date of Birth"/>
</div>

Answer 1

尝试传播状态和 type 字段：

 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        e.preventDefault()
        setUserData({...userData, type: e.target.value})
    }

向对象添加新内容

Add new content to object

typescript

reactjs

use-context