React中使用onchange事件切换选项时清空选择状态对象的问题

核心问题分析 #

• 对象引用判断错误：newarr === {}这个条件永远为false，因为JavaScript中两个空对象是不同的引用地址，不会相等。这导致每次切换选项时，都会执行setValues({...newarr, [value]: temparr})，把新值追加到原有对象中，而不是清空后设置新值。
• 需求逻辑偏差：你的需求是切换选项时清空对象再设置当前值，所以根本不需要保留旧对象的内容，直接生成只包含当前选中项的新对象即可。

修改后的代码 #

重点修改click函数中的状态更新逻辑：

const BusinessForm = ({business}) => {
    const [newarr,setValues] = useState({})
    const [selects,setSelect] = useState([])
    const arr = flattenObj(business.options)

    const click = (value,array) =>{
        const temp = array.filter((ob)=>ob[value])[0]
        const temparr = []
        temp[value].forEach((s)=>{
            if(typeof s==='object'){
                temparr.push(Object.keys(s)[0])
            }else{
                temparr.push(s)
            }
        })
        // 直接设置为仅包含当前选中项的新对象，无需判断旧对象状态
        setValues({[value]: temparr})
    }

    console.log(newarr)

    return ( 
        <div>
            <h5>
                this is a businessform for {business.business_name}
            </h5>
            <select name="" id="" onChange={(e)=>{
               click(e.target.value,arr)
            }}  defaultValue={Object.keys(arr)[0]} >
                    {
                        arr.map((el)=>(
                           Object.keys(el).map((k)=>(
                            <option value={k}  key={k} >{k}</option>
                           ))
                        ))
                }
            </select>
        </div>
     );
}

额外说明 #

如果后续有需要基于旧状态做修改的场景，建议使用函数式更新获取最新状态值，避免异步状态更新带来的错误：

setValues(prevState => {
    // 可基于prevState自定义修改逻辑，比如清空后添加新值、保留特定字段等
    return {[value]: temparr}
})

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