为什么子组件在React中无法通过Axios获得父项的道具

Question

我用一个简单的标志来解决它，如下所示：

1. 我在状态对象上添加了新的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 获取数据。

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

以下是父组件：

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

2. 下面，将结果传递给ChildComponent到render函数中。

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

我猜这是一个延迟问题，其中chld组件在axios异步从服务器返回数据之前加载

谢谢处理类似情况的人的任何帮助。

Answer 1

因为您要将this.state.movies而不是this.state.values传递给ChildComponent 。

你是如何做到的 ：

<ChildComponent1 values={this.state.movies} test="ok"/>

应该如何 ：

<ChildComponent1 values={this.state.values} test="ok"/>