React受控输入useCallback中props值过时问题求助

我有一个受控输入组件，其value和onChange事件通过props传递。当selectedValue prop变化时，onInputChanged回调会触发，但在回调中访问selectedValue时获取的是旧值。看起来selectedValue变化时，onInputChanged在依赖更新前就被调用了。请问如何确保在onChange事件中能访问到最新的selectedValue？

代码示例：

const TestInput = ({ onChange, selectedValue }) => {
  const onInputChanged = React.useCallback(content => {

    // 无法打印最新的selectedValue
    console.log(selectedValue);

    onChange(content.target.value);
  }, [selectedValue]);

  return (
    <input value={selectedValue} onChange={onInputChanged} placeholder="Test...." />
  );
};

const TestContainer = () => {
  const [value, setValue] = React.useState('');

  return <TestInput selectedValue={value} onChange={setValue} />;
};

解决方案 #

方法1：直接从事件目标获取最新值 #

输入框的最新值已经包含在事件对象的content.target.value中，直接使用这个值即可，无需依赖selectedValue prop，还能简化useCallback的依赖项：

const TestInput = ({ onChange, selectedValue }) => {
  const onInputChanged = React.useCallback(content => {
    const latestValue = content.target.value;
    console.log(latestValue); // 此处为输入框的最新值
    onChange(latestValue);
  }, [onChange]);

  return (
    <input value={selectedValue} onChange={onInputChanged} placeholder="Test...." />
  );
};

方法2：使用useRef保存最新的selectedValue #

如果必须在回调中访问selectedValue的最新值，可以用useRef实时同步prop的值，确保回调执行时能拿到最新引用：

const TestInput = ({ onChange, selectedValue }) => {
  const valueRef = React.useRef(selectedValue);

  // 每次selectedValue更新时同步ref
  React.useEffect(() => {
    valueRef.current = selectedValue;
  }, [selectedValue]);

  const onInputChanged = React.useCallback(content => {
    console.log(valueRef.current); // 此处为最新的selectedValue
    onChange(content.target.value);
  }, [onChange]);

  return (
    <input value={selectedValue} onChange={onInputChanged} placeholder="Test...." />
  );
};

方法3：父组件使用函数式更新 #

如果需要基于当前状态计算新值，可以在父组件的状态更新函数中使用函数式写法，确保获取到最新的状态值：

const TestContainer = () => {
  const [value, setValue] = React.useState('');

  const handleChange = (newValue) => {
    setValue(prevValue => {
      console.log(prevValue); // 此处为更新前的旧状态值
      return newValue;
    });
  };

  return <TestInput selectedValue={value} onChange={handleChange} />;
};

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