为什么这个函数 React 组件在状态改变后会重新渲染？ [复制]

Question

我有以下代码...

const Thing = ({...})=> {
    const initialState = {
        foo: ''
    }
    const [state, setState] = useState(initialState);
    const changeFormvalue = (e) => {
        state.foo = e.target.value;
        setState(state);
    }
    return (
        <input type="text" name ="foo"
               value={state.foo}
               onChange={changeFormvalue} />
    )
}

当我运行时，我看到它命中了函数，我看到它设置了值。但是，在 setState 命令之后，页面并没有重新渲染，值也没有更新。

为什么页面没有更新？

Answer 1

正确设置状态（不改变它）。

请参阅下面的重构代码，并进一步阅读问题 cmets 中提供的链接。

const Thing = ({...})=> {
    const initialState = {
        foo: ''
    }
    const [state, setState] = useState(initialState);
    const changeFormvalue = (e) => {
        const value = e.target.value;
        setState(prev => ({...prev, foo: value, assetName: value}));
    }
    return (
        <input type="text" name ="foo"
               value={state.foo}
               onChange={changeFormvalue} />
    )
}