把道具从州传给孩子

Question

我正在从我的组件中的WebAPI调用中获取数据。我把价值观放入状态。

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

但我发现我的子组件在渲染时没有填充数据。。。因为这似乎发生在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>
        )
    }

我的显示标签组件就是这样。我是新来的，只是想制作可重复使用的组件：

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

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

Answer 1

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

Answer 2

我不确定您是否必须等待请求完成（但您很可能必须等待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>
        )
    }

（只是把状态改为道具）

试试看，祝你好运！

Answer 3

这是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>
    )
}

然后，您可以在成功的数据提取后将加载设置为false，并且您的表单将正确显示，没有任何错误。

（我编辑这篇文章是为了使用您的父组件，而不是DisplayLabel，因为它在这里更有意义。但是，您的问题中忽略了组件名称）。