react onChange 事件拿不到最新的 props

在React中，`onChange`事件通常用于监听输入字段的变化。如果你发现`onChange`事件拿不到最新的props，可能是由于以下几个原因：

1. **立即更新**：当你在函数组件中直接修改state，React会立即重新渲染组件，包括重新运行`onChange`函数。如果你希望在用户完成输入后再执行操作，可以考虑使用`useEffect`或`debounce`来延迟执行，如引用[1]所示。

import useDebounce from 'use-debounce'; // 假设这是一个防抖函数

const NewInput = ({ onInputChange }) => {
  const debouncedValue = useDebounce(e.target.value, 300); // 防抖处理

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onInputChange(debouncedValue);
  };

  return <input onChange={handleChange} />;
};

export default NewInput;

2. **事件传递**：确保你在`onChange`函数中正确地接收到了`event`参数，因为`event`包含了最新的DOM状态，包括可能改变的prop。如引用[2]所述，你应该直接将`event`作为参数传递给`saveFormData()`或其他处理函数。

3. **生命周期管理**：在类组件中，如果`props`发生变化，可能会在不同的生命周期阶段触发重新渲染。你可以通过` componentDidUpdate(prevProps)`来检查当前`props`是否已更改，但请注意过度依赖生命周期方法可能导致代码难以维护。

class InputComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (!shallowEqual(this.props, prevProps)) {
      // 检查并处理新的props
    }
  }

  handleChange = (event) => {
    this.props.onInputChange(event.target.value);
  };

  render() {
    // ...
  }
}

export default InputComponent;