使用 setState 时动态更改嵌套对象的值

Question

我有一个状态是这样的：

    const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        dateOfBirth: {
            month: '',
            day: '',
            year: ''
        },
        phoneNumber: '',
        gender: '',
        interests: [],
        language: '',
        medicareNumber: ''
    })

我尝试在 dateOfBirth 对象 onChange 中重新分配月日和年的值，这样做的语法是什么而不覆盖对象中的任何其他键？

                        <input
                            value={values.dateOfBirth.month}
                            onChange={(e) => setValues({
                                ...values,
                                dateOfBirth: { month: e.target.value }
                            })}
                            type='number'
                            placeholder='MM'
                        />

                        <input
                            value={values.dateOfBirth.day}
                            onChange={(e) => setValues({
                                ...values,
                                dateOfBirth: { day: e.target.value }
                            })}
                            type='number'
                            placeholder='DD'
                        />

上面的代码将 dateOfBirth 的值设置为仅月份或仅日期。但我需要所有的键和值保持不变，并且只更改受尊重的键内的值。

Answer 1

尝试：

<input
    value={values.dateOfBirth.month}
    onChange={(e) => setValues({
        ...values,
        dateOfBirth: {
            ...values.dateOfBirth,
            month: e.target.value
        }
    })}
    type='number'
    placeholder='MM'
/>

或者更好的是，尽量不要嵌套状态属性。

使用 setState 时动态更改嵌套对象的值

dynamically changing value of nested object when using setState

javascript

reactjs

use-state