React应用刷新时需从componentWillReceiveProps获取输入框值求助

我来帮你搞定这个问题～首先得提醒你，componentWillReceiveProps已经被React官方废弃啦，新版本里推荐用更安全的方法来处理props更新的场景，而且你当前的代码里还有几个小问题需要调整，比如未定义的deviceID变量，以及刷新时的初始化逻辑。

问题分析 #

你需要在应用刷新后，根据props里的设备数据同步输入框的值，但原有的componentWillMount和componentWillReceiveProps都不是当前React版本的最佳实践，而且刷新时组件重新初始化，需要确保能正确获取到最新的props数据。

方案一：使用getDerivedStateFromProps（推荐） #

这是React官方推荐的处理props到state同步的静态方法，会在组件初始化和每次props更新时触发（包括刷新后props重新传入的情况）：

export class DeviceEdit extends React.PureComponent<Props> {
  constructor(props) {
    super(props);
    // 初始化时直接从props取初始值，避免渲染空白
    const initialDevice = props.devices.data.find(device => device.id === `${props.deviceID}`) || {};
    this.state = {
      value: initialDevice.name || '',
      lastDeviceID: props.deviceID,
      lastDevices: props.devices
    };
    this.handleChange = this.handleChange.bind(this);
  }

  // 静态方法，处理props变化时的state更新
  static getDerivedStateFromProps(nextProps, prevState) {
    // 判断deviceID或devices是否真的变化，避免不必要的更新
    if (nextProps.deviceID !== prevState.lastDeviceID || nextProps.devices !== prevState.lastDevices) {
      const targetDevice = nextProps.devices.data.find(device => device.id === `${nextProps.deviceID}`) || {};
      return {
        value: targetDevice.name || '',
        lastDeviceID: nextProps.deviceID,
        lastDevices: nextProps.devices
      };
    }
    // 不需要更新时返回null
    return null;
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

方案二：结合componentDidMount和componentDidUpdate #

如果你觉得静态方法不够直观，也可以用生命周期方法来处理，把更新逻辑抽成复用方法：

export class DeviceEdit extends React.PureComponent<Props> {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    // 组件初始化时同步值
    this.syncValueFromProps(this.props);
  }

  componentDidUpdate(prevProps) {
    // 当deviceID或devices变化时，重新同步值
    if (prevProps.deviceID !== this.props.deviceID || prevProps.devices !== this.props.devices) {
      this.syncValueFromProps(this.props);
    }
  }

  // 抽离复用的同步逻辑
  syncValueFromProps(props) {
    const targetDevice = props.devices.data.find(device => device.id === `${props.deviceID}`) || {};
    this.setState({ value: targetDevice.name || '' });
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

关键注意点 #

• 你的原代码里deviceID变量未定义，我默认它是从props传入的，所以用了this.props.deviceID，如果实际情况不同，你需要对应调整。
• 如果devices.data是异步加载的，刷新后可能一开始是空数组，这时候find会返回undefined，所以要加|| {}来兜底，避免读取name时报错。
• 如果你发现组件频繁触发更新，可以检查父组件是否每次渲染都生成新的devices对象，这种情况可以在父组件用useMemo（函数组件）或者缓存对象来优化。

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