Question

我有一个带有一个父组件和三个子组件的React应用程序。在父组件中，我有包含数据的状态，并将这些数据传递给子组件。我还有三个端点，必须在父组件的componentDidMount函数上发送三个ajax请求。如何在React中做到这一点？

var Parent = React.createClass({
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },
    componentDidMount: function() {
        ???
        ???
        ???
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
})

var Child1 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

var Child2 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

var Child3 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

我想用叠加层渲染父组件＆＃34;正在加载...＆＃34;并且在componentDidMount上发送3个请求，更新状态并将数据作为道具传递给子组件，前提是所有3个请求都成功完成，然后呈现/重新呈现这些子组件。如果一个请求出现问题，我不想呈现任何子组件（正在加载......一直持续到成功）。异步或前一个成功的一个请求？

提前致谢。

Answer 1

这样的事情可行。 ajax调用是伪代码。我假设你正在使用一些ajax api libarary。 - 在这个例子中，我使用superagent（没有额外的承诺lib，而只是使用es6承诺）。我使用Promise.all映射 - 基本上，我们等到所有ajax请求都返回..在“then”中我用结果更新状态。一旦promise.all得到解决，它就会按照您发出请求的顺序传递包含每个请求的数组。在“ajaxApi”中 - 这些是api调用。我希望这有帮助。

注意：我在这里假设es6，因此我使用了promise.all和一些es6 shorthan。如果你不使用es6，我道歉。让我知道，我可以展示非es6解决方案。

//这是一个没有es6的Axios版本。我在这里做一些假设。我希望你能适应自己的需要。

对componentDidMount的几个请求

1 个答案: