Javascript 把道具从州传给孩子

我正在从我的组件中的WebAPI调用获取数据，并在我的父react组件上安装。我将这些值放入状态

渲染表单时，我只是使用数据（组件）制作自定义标签，并将标签文本和数据传递给该组件。（我显示的每个字段一个）。我通过道具将状态值传递给子组件

但我发现我的子组件在渲染时没有填充数据。。。因为这似乎发生在api调用之前。api发生时，状态被设置，但数据永远不会到达子组件。我认为道具会将更新后的状态数据传递给组件。我错了。我应该如何做到这一点？我希望在父级中加载数据，然后呈现子组件，并传入数据

  componentDidMount() {
        this.loadData();
    }

    loadData() {
        var request = {
            method: 'GET',
            URL: "http://example.com/api/user/profile",
        }

        fetchData(request).then(response => {
            if(response.errorcode != "OK")
            {
                console.log("Bad response from API. Need to redirect!")
            }
            else
            {
                this.setState(
                    {
                        firstname: response.payload.firstname, 
                        surname: response.payload.surname,
                        email: response.payload.email,
                        countryId: response.payload.countryId,
                        countries: response.payload.countries
                    }
                );
            }
        });
    }

    render() {
        return (
            <div>
                <h2>Your Profile</h2>
                <div className="row">
                    <div className="col-xs-6">
                        <DisplayLabel labelText={"Firstname"} data={this.state.firstname} />
                        <DisplayLabel labelText={"Surname"} data={this.state.surname} />
                        <DisplayLabel labelText={"Email Address"} data={this.state.email} />
                        <DisplayLabel labelText={"Country"} data={this.state.countryId} />
                        <div className="form-group row right">
                            <button className="btn btn-primary" onClick={this.openModal}>Edit</button>
                        </div>
                    </div>
                </div>
                <Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} style={modalStyle}>
                    <ProfileEditBox closeMeCallback = {this.closeModal} />
                </Modal>
            </div>
        )
    }

componentDidMount（）{
这是loadData（）；
}
loadData（）{
var请求={
方法：“GET”，
URL:“http://example.com/api/user/profile",
}
获取数据（请求）。然后（响应=>{
如果（response.errorcode！=“OK”）
{
log（“来自API的错误响应。需要重定向！”）
}
其他的
{
这是我的国家(
{
firstname:response.payload.firstname，
姓氏：response.payload.姓氏，
电子邮件：response.payload.email，
countryId:response.payload.countryId，
国家：response.payload.countries
}
);
}
});
}
render（）{
返回(
你的个人资料
编辑
)
}

我的显示标签组件就是这样。我不熟悉这一点，只是尝试制作可重用组件：

import React, {Component} from 'react';

export default class DisplayLabel extends Component {
    constructor(props)
    {
        super(props);
        this.state = {
            labelText: this.props.labelText,
            data: this.props.data
        }
        console.log(this.state);

    }

    componentDidMount() {
        this.setState({
            labelText: this.props.labelText,
            data: this.props.data
        });
        console.log("ComponentDidMount", this.state);

    }

    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-12">
                        <label className="control-label">{this.state.labelText}</label>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12">
                        &nbsp;&nbsp;<strong><span>{this.state.data}</span></strong>
                    </div>
                </div>
            </div>
        )
    }
}

import React，{Component}来自'React'；
导出默认类DisplayLabel扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
labelText:this.props.labelText，
数据：this.props.data
}
console.log（this.state）；
}
componentDidMount（）{
这是我的国家({
labelText:this.props.labelText，
数据：this.props.data
});
log（“ComponentDidMount”，this.state）；
}
render（）{
返回(
{this.state.labelText}
{this.state.data}
)
}
}

---

在呈现表单之前，我需要等待API调用完成？

这是React中的常见问题。我通常尝试用一个显示某种加载指示器的模式来解决它。因此，我将在构造函数中初始化您的

状态

：

    this.state = {
        loading: true
    }

我将更改您的

渲染

，以检查

加载

bool:

render() {
    if (this.state.loading) {
        return (<h1>Loading, please wait...</h1>);
    }
    return (
        <div>
            <h2>Your Profile</h2>
            <div className="row">
                <div className="col-xs-6">
                    <DisplayLabel labelText={"Firstname"} data={this.state.firstname} />
                    <DisplayLabel labelText={"Surname"} data={this.state.surname} />
                    <DisplayLabel labelText={"Email Address"} data={this.state.email} />
                    <DisplayLabel labelText={"Country"} data={this.state.countryId} />
                    <div className="form-group row right">
                        <button className="btn btn-primary" onClick={this.openModal}>Edit</button>
                    </div>
                </div>
            </div>
            <Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} style={modalStyle}>
                <ProfileEditBox closeMeCallback = {this.closeModal} />
            </Modal>
        </div>
    )
}

render（）{
if（this.state.loading）{
退货（正在装货，请稍候…）；
}
返回(
你的个人资料
编辑
)
}

然后，在成功提取数据后，您可以将

加载

设置为

假

，表单将正确显示，不会出现任何错误

---

（我编辑此文件是为了使用您的父组件，而不是

DisplayLabel

，因为它在这里更有意义。但是，您的问题中忽略了组件名称）。

我不确定您是否必须等待请求完成（但您很可能必须等待UI问题），但我猜您的问题是其他问题

您获取了这些道具并将它们包含在您的状态中（这是不安全的），然后当组件完成加载时，您会再次更新状态，但请求可能在组件完成加载后完成

如果必须将道具放入状态，则应添加componentDidUpdate或componentWillReceiveNewProps生命周期函数，而不是componentDidMount

但是，如果不必（最有可能），可以将渲染函数更改为：

render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-12">
                        <label className="control-label">{this.props.labelText}</label>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12">
                        &nbsp;&nbsp;<strong><span>{this.props.data}</span></strong>
                    </div>
                </div>
            </div>
        )
    }

render（）{
返回(
{this.props.labelText}
{this.props.data}
)
}

（刚刚将状态更改为道具）

---

试试看，祝你好运

因为构造函数在组件装载时调用了一次，所以您可以做一件事，所以在渲染中，使用两个var并将数据分配给它。然后使用这些变量来显示数据。因为每次父组件的状态改变时，子组件都会呈现，但构造函数不会

您不必等待API响应，但可以，只有在解决请求时才会填充子组件。谢谢。我如何将从web api加载的数据传递给我的子组件？像你这样对我来说似乎很好。可以防止渲染子组件时检查父级状态。例如

{this.state.firstname&&}

。啊，谢谢你！这管用！我可以