React中useState异步更新失效：子组件改状态无法即时获取

问题原因 #

React里useState的更新是异步批量处理的，调用setTest之后状态不会立刻改变。你现在在子组件里先调用setTest('b')，紧接着就触发父组件的onClick，这时候父组件里的test还是旧值'a'——因为React还没完成状态更新和重新渲染。等第二次点击时，第一次的状态更新已经生效，所以才能拿到正确结果。

解决方法 #

方法1：直接传递新值给onClick #

既然调用setTest时已经明确知道新值是'b'，直接把这个值传给onClick就行，不用依赖组件状态：

修改父组件，让onClick接收参数：

export default function Example() {
  const onClick = async (newValue: string) => {
    console.log('new value', newValue) // 直接拿到新值'b'
  }

  const [test, setTest] = useState('a')
  
  return (
    <ClickExample setTest={setTest} onClick={onClick} />
  )
}

子组件调用onClick时传入新值：

interface ClickExampleProps {
  setTest: React.Dispatch<React.SetStateAction<string>>;
  onClick: (val: string) => void;
}

export default function ClickExample({ setTest, onClick }: ClickExampleProps) {
  const next = useCallback(
    (alphabet: string) => {
      setTest(alphabet)
      onClick(alphabet) // 直接传递新值
    },
    [onClick, setTest],
  )

  return <SelectButton onClick={() => next('b')} />
}

方法2：用useEffect监听状态变化 #

如果你的逻辑必须依赖状态更新后的结果执行，可以在父组件里用useEffect监听test的变化，状态更新后自动触发onClick：

父组件修改：

export default function Example() {
  const [test, setTest] = useState('a')

  const onClick = async () => {
    console.log('current value', test) // 此时test已经是更新后的'b'
  }

  // 监听test的变化，状态更新后执行onClick
  useEffect(() => {
    onClick()
  }, [test, onClick])
  
  return (
    <ClickExample setTest={setTest} />
  )
}

子组件不需要再调用onClick：

interface ClickExampleProps {
  setTest: React.Dispatch<React.SetStateAction<string>>;
}

export default function ClickExample({ setTest }: ClickExampleProps) {
  const next = useCallback(
    (alphabet: string) => {
      setTest(alphabet)
    },
    [setTest],
  )

  return <SelectButton onClick={() => next('b')} />
}

方法3：函数式更新（适用于基于旧状态计算新值的场景） #

如果新状态需要基于旧状态计算（比如切换值），可以用函数式更新，同时在里面执行逻辑：

// 子组件里的next函数修改为
const next = useCallback(
  (alphabet: string) => {
    setTest(prev => {
      const newVal = alphabet; // 或者基于prev计算新值
      onClick(newVal);
      return newVal;
    })
  },
  [onClick, setTest],
)

总结 #

优先选方法1，逻辑最直接，不用等状态更新；如果必须依赖更新后的状态，就用方法2的useEffect监听。核心就是别在调用setState后立刻依赖当前状态——因为这时候状态还没真的变。

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