React修改state后UI未同步更新问题求解（附完整代码）

React 要求 state 是不可变数据，useState 触发组件重渲染的判断逻辑是浅比较新旧 state 的引用地址：

• 你代码中 let stateCopy = state 没有创建新的对象，只是把原 state 对象的引用赋值给了stateCopy，后续对stateCopy[key]的修改本质是直接修改了原 state 的值
• 调用setState(stateCopy)时，传入的还是原 state 的引用，React 判定 state 没有发生变化，因此不会触发组件重渲染，UI 自然不会更新

有两种常见的修复方式，按需选择即可：

方案1：创建新的对象副本（推荐保留对象结构的场景） #

修改handleInputChange逻辑，先通过扩展运算符拷贝得到全新的对象，再修改对应字段后传给setState，示例代码如下：

const handleInputChange = (e) => {
    // 先创建新的对象副本，不修改原state
    const newState = {
        ...state,
        name: e.target.value
    }
    setState(newState);
}

不需要额外写循环判断，直接指定要修改的字段即可，逻辑更简洁。

方案2：拆分独立state（推荐字段关联性弱的场景） #

如果name和age没有强关联，可以拆成两个独立的useState，从根源避免对象引用判断的问题：

import { useState } from 'react';

export const Test = () => {
    const [name, setName] = useState('khaled');
    const [age, setAge] = useState(18);

    const handleInputChange = (e) => {
        setName(e.target.value);
    }

    return(
        <div>
            <span>Name</span>
            <input onChange={ handleInputChange } />
            <span>{name}</span>
        </div>
    )
}

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