Question

我从我的parent react组件的componentDidMount中的WebAPI调用中获取数据。我将这些值置于状态。

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

但我发现我的子组件正在呈现而没有填充数据......因为这似乎发生在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

这是React中的常见问题。我通常尝试使用显示某种加载指示符的模式来解决它。所以我会在构造函数中初始化你的state：

    this.state = {
        loading: true
    }

我会更改您的render以检查loading布尔：

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，因为它更有意义。但是，您的问题中省略了组件名称。

Answer 2

我不确定您是否必须等到请求完成（但您很可能不得不处理UI问题），但我想您的问题是其他问题。

你拿走道具并将它们包含在你的状态中（这是不必要的），然后当组件完成它的加载时你再次更新状态，但是请求probbaly在componnent完成它的加载后补充。

如果必须将props放在你的状态中，你应该添加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

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

将道具从州转移到孩子

3 个答案: