React状态未完成更新即触发render 子组件接收旧props值问题

你遇到的问题不是render提前执行，是踩了React类组件合成事件的异步访问坑：

• React的事件回调参数e是框架封装的合成事件对象，在React 16及更早版本中，合成事件默认开启池化机制：事件回调同步执行完成后，事件对象的所有属性会被重置清空，供后续事件触发时复用，减少内存开销。
• 你传入setState的状态更新函数是异步延迟执行的，等这个函数真正运行时，onChange对应的事件回调早就执行完毕，合成事件e已经被重置，此时读取e.target.value拿不到滑块的当前最新值，最终更新到state、传给Board组件的自然是旧值/异常值。
• 补充说明：React的重渲染时序本身没有问题，setState触发的render流程一定是基于最新的state值执行的，你观察到的"拿到旧值"本质是state更新时写入的就是错误值，和render执行时机无关。另外你代码里写的{ ...prev }属于冗余逻辑，更新单个state字段时不需要展开旧state。

最稳妥、全版本兼容的写法是在事件回调的同步执行阶段提前读取需要的值，存入局部变量后再调用setState，不要在setState的异步回调里访问事件对象：

brushSizeChange(e) {
    // 同步阶段先缓存目标值，此时事件对象还未被回收
    const newBrushSize = e.target.value;
    this.setState({ brushSize: newBrushSize });
}

如果你确实需要在setState的更新函数内访问事件对象，可以调用e.persist()方法将当前合成事件移出事件池，避免被重置，但这种写法没有必要，不推荐使用：

brushSizeChange(e) {
    e.persist();
    this.setState((prev) => ({ brushSize: e.target.value }));
}

修改后滑块调整时state会正确更新为最新值，Board组件就能接收到正确的props了。

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