求助：React组件无需useEffect获取最新对象状态并触发Alert的方法

问题说明 #

调用setState更新状态后，立即判断state.value是否为'5'并触发alert时，无法获取最新的state值。这是因为React的setState是异步操作，调用后不会立刻更新state对象，此时访问的还是更新前的旧值。

解决方案 #

直接使用子组件传入的newValue进行判断，而不是依赖尚未更新的state：

修改后的App.jsx代码：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const App = (props) => {
  const [state, setState] = useState({ value: "" });

  const updateState = (newValue) => {
    setState({ value: newValue });
    // 直接用传入的newValue判断，不用等state更新
    newValue === '5' && alert('the value is 5');
  }

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ChildComponent updateState={updateState} />
    </div>
  );
}

export default App;

原理说明 #

newValue是子组件输入框的最新值，也就是我们要同步到state中的内容。由于setState的异步特性，state不会在调用后立即更新，但newValue已经是确定的最新值，直接用它做判断就能准确触发alert，完全不需要依赖useEffect监听state变化。

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