javascript - React 渲染方法依赖于异步请求和状态变化

Question

我正在尝试学习 ReactJS 和 Redux，并且遇到了一个我似乎无法克服的问题。

我有一个 React 组件，它从异步请求获取数据。

export class MyPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      enableFeature: false,
    }

    this.handleEnableFeatureChange = this.handleEnableFeatureChange.bind(this)
  } 

  componentWillMount () {
    this.fetchData()
  }

  fetchData () {
    let token = this.props.token
    this.props.actions.fetchData(token)
  }

  handleEnableFeatureChange (event) {
    this.setState({ enableFeature: event.target.checked })
  }

  render () {
    if (this.props.isFetching) {
      return (
        <div>Loading...</div>
      )
    } else {
      return (
        <div>
          <label>Enable Feature
              <input type="checkbox"
                className="form-control"
                checked={this.props.enableFeature}
                onChange={this.handleEnableFeatureChange}
              />
          </label>
        </div>
      )
    }
  }
}

所以，我现在的问题是，当我更改复选框的状态时，我想更新数据的状态。然而，每次我更新数据的状态时，react 组件方法 shouldComponentUpdate 就会启动，并使用当前的 props 来渲染原始数据。

我想看看一般如何处理此类案件。

谢谢。

Answer 1

尝试按照以下方式进行操作，即

1. 使用componentWillReceiveProps将 props.enableFeature 分配给 state.enableFeature。来自文档

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Note that React may call this method even if the props have not changed, so make sure to compare the current and next values if you only want to handle changes. This may occur when the parent component causes your component to re-render.

componentWillReceiveProps() is not invoked if you just call this.setState()

使用此状态加载复选框的值

操纵此状态(onchange)以更新复选框的值

以下代码适用于您的情况

export class MyPage extends React.Component {
  static propTypes = {
    isFetching: React.PropTypes.bool,
    enableFeature: React.PropTypes.bool,
    token: React.PropTypes.string,
    actions: React.PropTypes.shape({
      fetchData: React.PropTypes.func
    })
  };
  
  state = {
    enableFeature: false,
  };

  componentWillMount () {
    this.fetchData();
  }

  /* Assign received prop to state, so that this state can be used in render */
  componentWillReceiveProps(nextProps) {
    if (this.props.isFetching && !nextProps.isFetching) {
      this.state.enableFeature = nextProps.enableFeature;
    }
  }

  fetchData () {
    const { token } = this.props;
    this.props.actions.fetchData(token)
  }

  handleEnableFeatureChange = (event) => {
    this.setState({ enableFeature: event.target.checked })
  };

  render () {
    return (<div>
      { this.props.isFetching && "Loading..." }
      { 
        !this.props.isFetching && <label>
          Enable Feature
          <input 
            type="checkbox"
            className="form-control"
            checked={this.state.enableFeature}
            onChange={this.handleEnableFeatureChange}
          />
        </label> 
      }
    </div>);
  }
}

注意:上面的代码没有执行，但应该可以工作(babel的stage-0代码)