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

Posted 2023-02-19

【中文标题】为啥子组件在 React 中没有通过 Axios 获得父组件的 props

【英文标题】：Why child component didnt get parent's props with Axios in React为什么子组件在 React 中没有通过 Axios 获得父组件的 props

【发布时间】：2017-06-20 23:21:24

【问题描述】：

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

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

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

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

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

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

---

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

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

下面是父组件：

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

下面，进入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 语句，我不知道。但现在它可以按我的需要工作。谢谢

是的，你需要添加一个 if 条件来检查 value 是否为空。

【参考方案1】：

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

你是怎么做的：

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

应该如何：

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

【讨论】：

在服务器返回结果之前，我们必须不允许子组件渲染，这是一个明显的异步问题。

好的。但是在您的示例中，您的状态中没有 movies 属性，但是您将其传递给了孩子。电影从何而来？