React组件props中如何获取state的最新值？

问题代码 #

// 这是传给按钮onClick props的函数
const handleDialogClick = () => {
    setDialogOpen({
      title: "请选择你想要的语言",
      content: (
        <TextField
          label="语言选择"
          select
          fullWidth
          InputLabelProps={{ shrink: true }}
          className="border-1 border-cadet-gray"
          onChange={({ target }) => {
            setPendingLanguage(target.value);
          }}
        >
          <MenuItem value="Chinese">中文</MenuItem>
          <MenuItem value="English">英文</MenuItem>
          <MenuItem value="Japanese">日文</MenuItem>
        </TextField>
      ),
      onCancelClick: setDialogClose,
      onConfirmlClick: () => {
        // 这里拿到的是旧的pendingLanguage引用 :(
        setLanguage(pendingLanguage);

        setDialogClose();
      }
    });
  };

  return (
    <div>
      <Button variant="contained" onClick={handleDialogClick}>
        点击打开弹窗
      </Button>

      // 其他代码...
    </div>
  )

问题描述 #

我在函数式组件的props中获取state最新值时遇到了问题——点击弹窗确认按钮时，setLanguage(pendingLanguage)拿到的总是旧的pendingLanguage值。我知道可以给setState传递函数来获取旧值，但这里我不需要用旧值计算新值，只是想直接拿到最新的pendingLanguage。

问题原因与解决办法 #

核心问题是闭包陷阱：当handleDialogClick执行时，onConfirmlClick回调会捕获当时的pendingLanguage值；后续通过setPendingLanguage更新状态时，这个回调里的pendingLanguage还是最初捕获的旧值——因为组件重新渲染后会生成新的handleDialogClick函数，但已经传给setDialogOpen的旧回调不会更新。

给你两个实用的解决方法：

方法1：用useRef存储最新值

useRef的.current属性会始终保存最新的状态值，不受闭包限制：

import { useRef, useState } from 'react';

// 声明ref存储最新值
const pendingLanguageRef = useRef<string>('');

// 更新state的同时同步更新ref
onChange={({ target }) => {
  const newValue = target.value;
  setPendingLanguage(newValue);
  pendingLanguageRef.current = newValue;
}}

// 确认时直接使用ref的最新值
onConfirmlClick: () => {
  setLanguage(pendingLanguageRef.current);
  setDialogClose();
}

方法2：跳过中间状态，直接获取输入值

如果你的弹窗组件允许传递ref，可以直接从TextField的DOM元素获取当前值，省去pendingLanguage中间状态：

const textFieldRef = useRef<HTMLInputElement>(null);

// 给TextField绑定ref
<TextField
  ref={textFieldRef}
  // 其他属性保持不变
/>

// 确认时直接读取ref的当前值
onConfirmlClick: () => {
  if (textFieldRef.current) {
    setLanguage(textFieldRef.current.value);
  }
  setDialogClose();
}

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