为什么子组件在 React 中没有通过 Axios 获得父组件的 props

【问题标题】：Why child component didnt get parent's props with Axios in React为什么子组件在 React 中没有通过 Axios 获得父组件的 props
【发布时间】：2017-06-20 23:21:24
【问题描述】：

我用这样一个简单的标志来解决它：

1. 我在 states 对象上添加了一个新的 flag 属性：loaded:false

2. 当我获取数据时，我将loaded 的值更新为 true，如下所示：

    helpers.getValues().then(results => this.setState({values:results.data,loaded:true}));
   

3. 最后，在render() 中，我首先检查loaded==true 是否存在，然后渲染 ChildComponent，就像这样：

   {this.state.loaded == true ? <ChildComponent values={this.state.values} name="theodore"/> : ''}
   

---

我正在 React 中编写一个简单的代码，通过 Axios获取数据。

数据返回给客户端，通信正常。 问题是我将结果数据作为道具传递给子组件，并且一旦子组件加载它就会要求 props.data 但它是空的。

下面是父组件：

1. 在componentDidMount 内部，我调用axios 来获取数据并更新setState 对象。

2. 下面，进入render函数，我将结果传递给ChildComponent。

   var ParentComponent = React.createClass({
       getInitialState:function(){
           return {
               values:''
               activeTab:0
           }
       },
       componentDidMount:function(){
           helpers.getValues().then(results => this.setState({values:results.data}));
       },
       render:function(){
           return(
               <div className='container'>
                   <div className="row">
                       <div className="col-sm-8 text-center" >
                           <h1>{pageTitle}</h1>
                           <Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect} id="controlled-tab-example">
                               <Tab eventKey={tabs[0].key} title={tabs[0].name}>
                                   Tab1
                                   <ChildComponent1 values={this.state.values} test="ok"/>
                               </Tab>
                               <Tab eventKey={tabs[1].key} title={tabs[1].name}>Tab2</Tab>
                           </Tabs>
                       </div>
                   </div>
               </div>
           )
       }
   

这里我展示了 ChildComponent（在一个单独的 js 文件中）。

在 componentDidMount 内部，我尝试显示道具，但得到它的对象如下： {values:'',test:'ok'}

var ChildComponent = React.createClass({
    componentDidMount:function(){
        console.log(this.props);
    },
    render:function(){
        return(
            <div>
                <ul>'nothing'</ul>
            </div>
        )
    }
});

我猜是延迟问题，在 axios async 从服务器返回数据之前加载了 chld 组件

如果有人处理过类似情况，任何帮助都将不胜感激，谢谢。

【问题讨论】：

• 即使你的孩子在请求数据从服务器返回之前渲染，它应该在执行 Promise 的then 块时再次渲染，因为你在 state 中设置了一个值，react 组件将渲染每个状态都会发生变化。
• 是的，我之前注意到了，但是在子组件上我曾经使用 map() 来创建
• 列表，但我得到了错误！也许我应该在那里添加一个 if 语句，我不知道。但现在它可以按我的需要工作。谢谢