Next.js调用React.useState后state.elements未定义无法push如何解决

问题原因 #

1. React的useState Hook 对对象类型的状态不会自动合并属性：你初始状态是包含input_type和elements两个属性的对象，只要你任意一次调用setState时没有完整传入所有原有属性，未传入的属性就会被直接移除。比如你如果在修改input_type时写了setState({input_type: 'xxx'})，执行后状态就会变成仅包含input_type属性的对象，elements直接丢失变为undefined，后续调用push自然会报错。
2. 你直接修改了原状态的引用：代码中let newElements = state.elements是引用赋值，后续push操作直接修改了原状态中的数组，属于React明确禁止的直接变更状态的行为，会导致状态更新异常、渲染不触发等问题。

解决方案 #

方案1：修改状态更新逻辑，保留所有原有属性 #

调整setState的写法，用对象展开运算符保留原有状态的所有属性，同时数组修改前先做浅拷贝：

const createOption = () => {
    // 浅拷贝原elements数组，避免直接修改原状态
    const newElements = [...state.elements]
    newElements.push({
        type: "option",
        value: "",
        id: state.elements.filter(e => e.type === 'option').length
    })
    // 展开原有state，仅覆盖修改的elements属性
    setState({
        ...state,
        elements: newElements
    })
}

同时你所有修改input_type的地方也要按相同逻辑修改，比如：

// 错误写法，会丢失elements属性
// setState({input_type: 'text'})
// 正确写法
setState({
    ...state,
    input_type: 'text'
})

方案2：拆分状态为独立的原子状态（更推荐） #

对于关联度不高的状态，直接拆成多个独立的useState，从根源上避免属性丢失的问题：

const [inputType, setInputType] = React.useState('')
const [elements, setElements] = React.useState([])

const createOption = () => {
    setElements(prev => [
        ...prev,
        {
            type: "option",
            value: "",
            id: prev.filter(e => e.type === 'option').length
        }
    ])
}

这种写法不用考虑对象合并的问题，状态更新逻辑更简单，也更符合React的最佳实践。

额外提示 #

你当前把createOption绑定到了输入框的onChange事件上，意味着输入框每输入一个字符都会触发一次新增option的逻辑，如果这不是你预期的行为，可以调整为绑定到onBlur或者专门的新增按钮的onClick事件上。

内容的提问来源于stack exchange，提问作者shenny tan