React表单onSubmit处理中依赖state更新是否安全？

为什么同步调用state更新后立即使用state会出错？ #

React的state更新是异步批量处理的，因此像下面这样的写法存在问题：

const _handleChange = (event) => {
  setEmail(event.target.value);
  _updateEmailPermissions(email);
};

因为setEmail并不会立刻修改email的值，_updateEmailPermissions调用时拿到的还是更新前的旧值。

表单提交时直接使用state是否安全？ #

看下面的场景：

const handleSubmit = (event) => {
    event.preventDefault();
    _updateEmailPermissions(email);
    // ...
}

return (
    <form onSubmit={handleSubmit}>
        <SomeComponent onChange={(event) => setEmail(event.target.value)} />
        <button>Submit</button>
    </form>
)

即使快速修改输入后立刻提交，也很难复现问题，但会不会出现handleSubmit使用过时email值的情况？

结论：这种写法是安全的 #

React的合成事件处理遵循事件循环机制：每次输入触发的onChange事件结束后，React会完成state的更新并触发组件重新渲染。当你点击提交按钮触发onSubmit时，这是一个独立的事件，此时组件已经完成了之前输入对应的state更新，handleSubmit里拿到的email一定是最新的。

放到你的实际AG Grid场景里也是一样：行数据变化触发的setRows会在当前事件结束后完成state更新，当你点击提交时，rows状态已经和表格显示的内容完全同步，不会出现数据不一致的情况。

无需useEffect的替代方案（更稳妥的写法） #

如果想彻底避开state异步更新的影响，不依赖state获取最新值，可以直接从数据源获取：

针对输入框场景 #

直接从表单元素中读取当前值：

const handleSubmit = (event) => {
    event.preventDefault();
    // 给输入框设置name属性，通过表单元素获取值
    const latestEmail = event.target.elements.email.value;
    _updateEmailPermissions(latestEmail);
};

// 对应JSX
<SomeComponent name="email" onChange={(event) => setEmail(event.target.value)} />

针对AG Grid场景 #

通过Grid的API直接获取当前行数据：

import { useRef } from 'react';

const ParentComponent = () => {
    const gridRef = useRef(null);
    // ...

    const handleSubmit = () => {
        // 通过Grid实例API获取最新行数据
        const latestRows = gridRef.current.api.getRowData();
        // 使用latestRows执行后续操作
    };

    return (
        <form onSubmit={handleSubmit}>
            <AgGridReact ref={gridRef} /* 其他配置 */ />
            <button>提交</button>
        </form>
    );
};

这种方式完全绕过state，直接获取组件的真实最新数据，彻底避免异步更新带来的潜在问题。

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