Javascript Reactjs：如何在安装组件之前获取要加载的数据？

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

我需要首先加载数据以填充状态，因为我不希望初始状态为

null

，我希望它包含自初始渲染以来的数据

我使用的是通量和Alt，这是

行动

@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>
    );
  }

}

这告诉我，

dealerData未定义

或

无法读取null的属性

---

我所需要的只是知道一种技术，在初始渲染发生之前可以获取数据。因此，我可以填写

状态

，并开始处理该数据

React确实保证

componentWillMount

中的状态分配将在第一次渲染之前进行。正如你在评论中所说：

在初始渲染发生之前，在客户端和服务器上调用一次。如果在此方法中调用setState，render（）将看到更新的状态，并且尽管状态发生更改，但只执行一次

但是，那里请求的异步操作不会立即更新您的存储。调用

GetDealersActions.getDealers（）

将发出用新内容更新存储的消息，但响应只会稍后到达事件队列。这意味着

This.props.dealersData

在函数期间不会更改，并且

setState

将尝试读取未定义属性的属性“dealersData”。无论如何，请求的内容在第一次渲染时不可见

我的建议与a中的建议相同。在程序中，防止组件在其可用之前呈现该内容（如您所做的）是一件合适的事情。或者，在“dealersData”尚未到达时呈现加载程序

---

为了解决您的特定问题，请从

组件willmount

中删除

设置状态

。如果您的父组件正确地侦听更改并将其传播到子组件中，那么所有这些都应该可以正常工作

componentWillMount () {
  GetDealersActions.getDealers();
}

---

我用来从服务器接收数据并显示数据的最佳答案

constructor(props){
        super(props);
        this.state = {
            items2 : [{}],
            isLoading: true
        }

    }

componentWillMount (){
 axios({
            method: 'get',
            responseType: 'json',
            url: '....',

        })
            .then(response => {
                self.setState({
                    items2: response ,
                    isLoading: false
                });
                console.log("Asmaa Almadhoun *** : " + self.state.items2);
            })
            .catch(error => {
                console.log("Error *** : " + error);
            });
    })}

 render() {
   return(
       { this.state.isLoading &&
                    <i className="fa fa-spinner fa-spin"></i>

                }
                { !this.state.isLoading &&
            //external component passing Server data to its classes
                     <TestDynamic  items={this.state.items2}/> 
                }
         ) }

构造函数（道具）{
超级（道具）；
此.state={
项目2:[{}]，
孤岛加载：正确
}
}
组件将安装（）{
axios({
方法：“get”，
responseType:'json'，
网址：‘……’，
})
。然后（响应=>{
自我状态({
项目2：答复，
孤岛加载：false
});
log（“Asmaa Almadhoun***:”+self.state.items2）；
})
.catch（错误=>{
console.log（“错误***：”+错误）；
});
})}
render（）{
返回(
{this.state.isLoading&&
}
{！正在加载此.state.isLoading&&
//将服务器数据传递给其类的外部组件
}
) }

一个相关问题：@E_net4这是我的问题：

在初始渲染发生之前在客户端和服务器上调用一次。如果在此方法中调用setState，render（）将看到更新后的状态，并且尽管状态发生了更改，但只执行一次。

这让我感到困惑。@E_net4在我的代码中，我已经添加了一个条件语句和该问题中的所有内容，但不起作用。查看我的代码，请尝试帮助我。您可能有一个类型错误，导致程序无法正常运行。但仍然会发生第一次渲染，然后调用

componentWillMount（）

。之后，程序再次呈现。根据React的合同，这是不可能的。要么你跟踪了另一个正在渲染的React对象，要么在最坏的情况下我们遇到了一个奇怪的错误。我正在等待数据库中的数据，这是因为什么？不可能是这样。JavaScript是异步的，因此任何函数都不会等待服务器的响应。请查看此答案警告：setState（…）：只能更新已装入或正在装入的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止操作。请检查ProfileController组件的代码。

constructor(props){
        super(props);
        this.state = {
            items2 : [{}],
            isLoading: true
        }

    }

componentWillMount (){
 axios({
            method: 'get',
            responseType: 'json',
            url: '....',

        })
            .then(response => {
                self.setState({
                    items2: response ,
                    isLoading: false
                });
                console.log("Asmaa Almadhoun *** : " + self.state.items2);
            })
            .catch(error => {
                console.log("Error *** : " + error);
            });
    })}

 render() {
   return(
       { this.state.isLoading &&
                    <i className="fa fa-spinner fa-spin"></i>

                }
                { !this.state.isLoading &&
            //external component passing Server data to its classes
                     <TestDynamic  items={this.state.items2}/> 
                }
         ) }