javascript - 将 Pros 从 State 传递给 Child

Question

我正在从父 React 组件上的 componentDidMount 中的 WebAPI 调用获取数据。我将这些值放入状态中。

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

但我发现我的子组件正在渲染而没有填充数据...因为这似乎发生在 api 调用发生之前。 api 发生，状态被设置，但数据永远不会到达子组件。我认为 Prop 会将更新的状态数据传递给组件。我错了。我应该如何实现这个目标？我想在父组件中加载数据，然后渲染子组件，传入数据。

  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

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

    this.state = {
        loading: true
    }

我会更改您的render以检查loading 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>
    )
}

然后，您可以在成功提取数据后将 loading 设置为 false，您的表单将正确显示，不会出现任何错误。

(我对此进行了编辑以使用您的父组件而不是 DisplayLabel，因为它在那里更有意义。但是，您的问题中省略了组件名称)。