javascript - Reactjs:如何在安装组件之前获取要加载的数据？

Question

有些奇怪的事情发生了，我一直在阅读 React 文档，他们讨论了生命周期以及如何在渲染组件之前做一些事情。我正在尝试，但我尝试的一切都失败了，总是组件首先进行渲染，然后调用 componenWillMount、..didMount 等。在调用这些函数之后，渲染再次发生。

我需要先加载数据以填充状态，因为我不希望初始状态为 null，我希望它包含自初始呈现以来的数据。

我正在使用 Flux 和 Alt，这是

Action

@createActions(flux)
class GetDealersActions {

  constructor () {
    this.generateActions('dealerDataSuccess', 'dealerDataFail');
  }

  getDealers (data) {
    const that = this;
    that.dispatch();
    axios.get(`${API_ENDPOINT}/get-dealers/get-dealers`)
      .then(function success (response) {
        console.log('success GetDealersActions');
        that.actions.dealerDataSuccess({...response.data});
      })
  }
}

然后是商店

@createStore(flux)
class GetDealersStore {

  constructor () {
    this.state = {
      dealerData : null,
    };
  }

  @bind(GetDealersActions.dealerDataSuccess)
  dealerDataSuccess (data) {
    this.setState({
      dealerData : data,
    });
  }

}

和组件

@connectToStores
export default class Dealers extends Component {

  static propTypes = {
    title : React.PropTypes.func,
  }

  static contextTypes = {
    router : React.PropTypes.func,
  }

  constructor (props) {
    super(props);
    this.state = {
      modal : false,
      dealerData : this.props.dealerData,
    }
  }

  componentWillMount () {
    GetDealersActions.getDealers();
    this.setState({
      dealerData : this.props.dealerData.dealersData,
    })
  }

  static getStores () {
    return [ GetDealersStore ];
  }

  static getPropsFromStores () {
    return {
      ...GetDealersStore.getState(),
    }
  }

  render () {

    return (<div>
          <div style={Styles.mainCont}>
            {!!this.props.dealerData ?
              this.props.dealerData.dealersData.map((dealer) => {
                return (<div>HERE I AM RENDERING WHAT I NEED</div>);
              }) : <p>Loading . . .</p>
            }
          </div>
      </div>
    );
  }

}

正如你在组件部分看到的，我有这个

  constructor (props) {
    super(props);
    this.state = {
      modal : false,
      dealerData : this.props.dealerData,
    }
  }

  componentWillMount () {
    GetDealersActions.getDealers();
    this.setState({
      dealerData : this.props.dealerData.dealersData,
    })
  }

这告诉我 dealerData 未定义 或 无法读取 null 的属性。

我所需要的只是了解一种可以在初始渲染发生之前获取数据的技术。所以我可以填写 state 并开始使用该数据。

Answer 1

React 确实保证 componentWillMount 中的状态分配将在第一次渲染之前发生。正如您在评论中所说:

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

但是，那里请求的异步操作不会立即更新您的商店。调用 GetDealersActions.getDealers(); 将发出商店更新了新内容的消息，但响应只会稍后到达事件队列中。这意味着 this.props.dealersData 在函数期间不会更改，并且 setState 将尝试读取未定义属性的属性“dealersData”。无论如何，请求的内容在第一次呈现时是不可见的。

我的建议与 similar question 中的建议相同.阻止组件呈现该内容，直到它变得可用，就像您所做的那样，这是在程序中做的一件适当的事情。或者，在您的“dealersData”尚未到达时呈现加载器。

---

要解决您的特定问题，请从 componentWillMount 中删除 setState。如果您的父组件正确地监听更改并将它们传播到子组件，那么一切都应该运行良好。

componentWillMount () {
  GetDealersActions.getDealers();
}