javascript - React 提升状态

Question

我正在研究 React 文档的这一部分:https://reactjs.org/docs/lifting-state-up.html .

我在我的一个项目中遇到了类似的问题，但略有不同。我们可以使用与文档相同的示例，稍作改动以适应我的问题:让我们假设而不是 <TemperatureInput />我有<Sensor />成分。该传感器以两种不同的输入形式捕获温度和压力。我的第一个想法是捕获这些压力和温度输入，然后放在 State 上，然后将其传递给 Sensor 的 props changeHandler 函数，该函数实际上是定义并在父组件上工作的函数。最后一部分是 React 文档所建议的，尽管它们没有将 State 传递给函数，而只是传递一个变量(event.target.value)。所以，作为一个例子，我们会有这样的东西:

class Sensor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {temperature:'',
                   pressure: ''}
    this.handleTemperatureChange = this.handleTemperatureChange.bind(this);
    this.handlePressureChange = this.handlePressureChange.bind(this);
  }

  handleTemperatureChange(e) {
    this.setState(temperature:e.target.value);
    this.props.onChange(this.state);
  }

  handlePressureChange(e) {
    this.setState(pressure:e.target.value);
    this.props.onChange(this.state);
  }

  render() {
    const temperature = this.props.temperature;
    return (
      <fieldset>
        <legend>Enter temperature and pressure:</legend>
        <input value={this.state.temperature}
               onChange={this.handleTemperatureChange} />
        <input value={this.state.pressure}
               onChange={this.handlePressureChange} />
      </fieldset>
    );
  }
}

我修改后的方法的唯一问题是 State 异步更新，因此当我将 State 传递给 onChange props 函数时，我实际上可能传递了以前的状态。

我不知道该如何处理。

Answer 1

正确。 React 状态更新是异步的，因此如果尝试在更新入队后立即访问状态，它仍然是当前渲染周期的状态，而不是您期望在下一个<看到的状态/em> 渲染周期。

使用组件生命周期方法(如 componentDidUpdate 处理对状态更新的“ react ”并正确发出副作用，如调用传递的回调。

class Sensor extends React.Component {
  ...

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

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

  componentDidUpdate(prevProps, prevState) {
    const { pressure, temperature } = this.state;
    if (prevState.pressure !=== pressure || 
      prevState.temperature !== temperature
    ) {
      this.props.onChange(state);
    }
  }

  render() {
    ...
  }
}

一种替代方法是使用 this.setState 回调函数(第二个参数)在状态更新后 运行一个函数，尽管我认为应该避免这种模式。 (IMO，如果滥用，它可能导致的问题多于它解决的问题，只需坚持效果的生命周期函数)

class Sensor extends React.Component {
  ...

  handleTemperatureChange(e) {
    this.setState(
      temperature:e.target.value,
      () => this.props.onChange(this.state),
    );
  }

  handlePressureChange(e) {
    this.setState(
      pressure:e.target.value,
      () => this.props.onChange(this.state),
    );
  }

  render() {
    ...
  }

看起来好像你的树中有更高的一些压力和温度状态，所以我很好奇是否是这种情况，如果简单地将它们作为 Prop 代理到输入会使得更有意义，例如:

const Sensor = ({ pressure, onChange, temperature }) => {
  const handleTemperatureChange = (e) => {
    onChange({ temperature: e.target.value });
  }

  const handlePressureChange = (e) => {
    onChange({ pressure: e.target.value });
  }

  return (
    <fieldset>
      <legend>Enter temperature and pressure:</legend>
      <input value={temperature} onChange={handleTemperatureChange} />
      <input value={pressure} onChange={handlePressureChange} />
    </fieldset>
  );
}