React嵌套状态数组更新 展开运算符使用异常问题求解

代码生成异常结构的核心原因有两点：

1. 初始状态代码存在语法问题：对象属性间缺少逗号分隔，series数组内的对象未正确闭合。
2. 状态更新逻辑错误：options.series是数组类型，直接在对象字面量内展开数组时，JS会将数组索引作为键、数组项作为值生成新对象，最终产出畸形的嵌套结构。同时直接读取外层闭包中的options值做更新，存在拿到旧状态的风险。

首先修正初始状态的语法错误：

const [options, setOptions] = useState({
    name: 'Name goes here',
    type: 'type goes here',
    series: [
        {
            type: 'series type',
            label: 'series label'
        }
    ]
})

再替换useEffect中的更新逻辑，使用函数式更新保证拿到最新状态，针对数组项做展开追加属性：

useEffect(() => {
    setOptions(prevOptions => ({
        ...prevOptions,
        // 给series数组中所有对象都追加tooltip属性用map遍历
        series: prevOptions.series.map(seriesItem => ({
            ...seriesItem,
            tooltip: {
                enable: true
            }
        }))
        // 如果仅需要给数组第一个对象追加属性，可替换为以下写法
        // series: [
        //     {
        //         ...prevOptions.series[0],
        //         tooltip: { enable: true }
        //     }
        // ]
    }))
}, [refreshData])

• 不要在对象字面量中直接展开数组，除非你明确需要将数组索引转换为对象的键。修改数组内的对象项时，优先通过map遍历、或按索引获取目标项后再展开修改。
• 嵌套状态更新推荐使用setState的函数式入参，避免闭包缓存旧值导致的更新异常。
• 编写对象、数组字面量时注意闭合结构、补全属性间的分隔逗号，避免基础语法错误。

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