如何在 React 应用程序中呈现服务器响应

Question

我正在尝试从服务器获取数据，然后经过一些解析，将其呈现在组件的表中。但问题是服务器的响应太晚了，我的表格没有显示。如何从服务器和模板同步我的数据？

谢谢

class TFSBuilds extends React.Component {

    constructor(){

        super(props);

        this.state = {

            builds: []

        };

    }

      componentDidMount() {

         AzureService.send("ObCloud").then((data)=>{

             let groupedData = this.groupBy(data.value, obj => obj.definition.id)

             this.createChartObjects(groupedData)    

         });

    }

     createChartObjects(groupedRecords) {

        const arr = [];

        for (let [k, v] of groupedRecords) {

            if(v && k){

                 this.state.builds.push(v[0]);

            }

        }

        return arr;

    }

    render() {

        const { builds } = this.state

        if (builds.length <= 0) { return null }

        return (

            <div className = "build-status" >

                <table className="table table-hover">

                    <thead>

                    <tr>

                        <th scope="col">By</th>

                        <th scope="col">When</th>

                        <th scope="col">Status</th>

                    </tr>

                    </thead>

                    <tbody>

                    {

                       builds.map(el =>

                            <tr>

                            <th scope="row">{el.requestedBy.displayName}</th>

                            <td>{el.requestedBy.date}</td>

                            <td>{el.requestedBy.status}</td>

                        </tr>)

                    }

                    </tbody>

                </table>

            </div>

        )

    }

}

Answer 1

您需要调用setState您的组件来显示更改。this.state.builds.push(v[0]);不会触发组件的更新。即使只是setState(this.state)在this.createChartObjects(groupedData)应该工作之后。此外，您的函数createChartObjects返回一个空数组，它可以返回一个您想要推送到您的状态的图表对象数组。const chartObjects = this.createChartObjects(groupedData);this.setState({&nbsp; builds: this.state.builds.concat(chartObjects)});setState() 将组件状态的更改加入队列，并告诉 React 该组件及其子组件需要使用更新的状态重新渲染。这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。@Src https://reactjs.org/docs/react-component.html#setstate

Answer 2

您遇到的问题是在状态更新后您没有触发另一个渲染。你可以通过调用 setState() 来改变状态，而不是改变状态对象。你需要做的就是改变这个：this.state.builds.push(v[0]);对此：this.setState({&nbsp;builds:&nbsp;this.state.builds.concat(v[0])&nbsp;});