C# 如何在从API获取数据后重新呈现表-React

我正在使用react引导表来呈现一个表。我从API中获取信息，然后希望重新呈现表。我对反应非常陌生，并且非常清楚在哪里设置数据的状态，以便我的表在收到数据后能够正确呈现。如果我直接在渲染中设置数据（而不是从API），这将渲染实际信息，因此不是表设置

以下是我到目前为止的情况。我试过几个不同的地方，所以如果完全错了，请容忍我

import React, { Component } from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import $ from 'jquery'; 

class Table extends Component {
    constructor(props) {
        super(props);
        //Controlled Component


        this.state = {
            poData: []
        };
    }

    componentDidMount() {
        var pos = [];

        function myCallBack(data) {
            // place your code here to do the work
            var obj = JSON.parse(data);

            // sample processing debug statements
            var s = 'retrieved this data from suitelet: ';
            console.log(s + data);
            //alert(s + data);
            return obj;
        }

        function getPOs() {
            var obj2 = [];
            alert("hi");
            // name of the call back function that drives the JSONP mechanism; this string must be the same
            // as your function that will ultimately process your request.
            var cb = 'myCallBack'

            //produce the JSON payload; JQuery will automatically add it to the URL for a JSONP call.
            var data = { id: '24567', user: '23455' };

            //note JQuery wants to see "callback=?" at the end of the URL; it tells the .getJSON call that this JSON request is of type JSONP
            var url = 'https://myapi.com&callback=?';

            //finally, the call. For convenience, we sent the data to our custom myCallBack function -- yet not mandatory in this implementation; the call back is in
            // already referenced via the .done() method. Other JQuery capacities are can take care of failed calls

            $.getJSON(url, data)
                .done(function (data) {
                    obj2 = myCallBack(data);
                })

            return obj2;
        }

        var obj2 = getPOs();
        this.setState({ poData: obj2 });
    }

    componentWillUnmount() {
        this.setState({ poData: [] });
    }



    render() {

        var poData = this.state.poData;

        return (
            <div>  
                <BootstrapTable data={poData} className="table" version='4'>
                    <TableHeaderColumn dataField='poID' isKey>PO ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='poName'>PO Name</TableHeaderColumn>
                    <TableHeaderColumn dataField='poShipDate'>PO Ship Date</TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
    }
}

export default Table;

import React，{Component}来自'React'；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
导入'react bootstrap table next/dist/react-bootstrap-table 2.min.css'；
从“jquery”导入美元；
类表扩展组件{
建造师（道具）{
超级（道具）；
//受控元件
此.state={
波多塔：[]
};
}
componentDidMount（）{
var pos=[]；
函数myCallBack（数据）{
//把你的代码放在这里来做这项工作
var obj=JSON.parse（数据）；
//示例处理调试语句
var s='从suitelet检索到此数据：'；
控制台日志（s+数据）；
//警报（s+数据）；
返回obj；
}
函数getPOs（）{
var obj2=[]；
警报（“hi”）；
//驱动JSONP机制的回调函数的名称；此字符串必须相同
//作为最终将处理您的请求的职能部门。
var cb='myCallBack'
//生成JSON负载；JQuery将自动将其添加到JSONP调用的URL中。
var data={id:'24567'，user:'23455'}；
//注意JQuery希望在URL的末尾看到“callback=？”；它告诉.getJSON调用这个JSON请求是JSONP类型的
var url='1〕https://myapi.com&callback=?';
//最后是调用。为了方便起见，我们将数据发送到我们的自定义myCallBack函数——但在这个实现中不是必需的；回调在
//已通过.done（）方法引用。其他JQuery功能可以处理失败的调用
$.getJSON（url、数据）
.完成（功能（数据）{
obj2=myCallBack（数据）；
})
返回obj2；
}
var obj2=getPOs（）；
this.setState（{poData:obj2}）；
}
组件将卸载（）{
this.setState（{poData:[]}）；
}
render（）{
var poData=this.state.poData；
返回(
采购订单编号
采购订单名称
订单发货日期
);
}
}
导出默认表；

编辑：

好的，我已经清理了一些。我尝试了下面提到的componentDidMount，但我的数据从未更新过

下面的内容实际上会正确地更改状态，但它仍然不会实际更新表。有什么想法吗

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import Table from './Components/Table';
import $ from 'jquery'; 

class App extends Component {
    constructor(props) {
        super(props)
        // the initial application state
        this.state = {
            isLoggedIn: false,
            username: '',
            password: '',
            poData: []
        };
    }

    componentDidMount() {
        //TODO
    }

    signIn(username, password) {
        // This is where you would call Firebase, an API etc...
        // calling setState will re-render the entire app (efficiently!)
        this.setState(
            {
                username: username,
                password: password,
                isLoggedIn: true,
                poData: []
            }
        )
    }

    updateTable(poData) {
        this.setState({
            poData: poData
        });
    }

    render() {
        // Here we pass relevant state to our child components
        // as props. Note that functions are passed using `bind` to
        // make sure we keep our scope to App
        return (
                <div>
                {
                    (this.state.isLoggedIn) ?
                        <div>
                            <Table data={this.state.poData} onUpdate={this.updateTable.bind(this)} />
                        </div>
                        :
                        <div>
                            <Login onSignIn={this.signIn.bind(this)} />
                        </div>
                }
            </div>
        )
    }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./Components/Login”导入登录名；
从“./Components/Table”导入表；
从“jquery”导入美元；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
//初始应用程序状态
此.state={
伊斯洛格丁：错，
用户名：“”，
密码：“”，
波多塔：[]
};
}
componentDidMount（）{
//待办事项
}
登录（用户名、密码）{
//这是您调用Firebase、API等的地方。。。
//调用setState将重新呈现整个应用程序（高效！）
这是我的国家(
{
用户名：用户名，
密码：密码，
伊斯洛格丁：是的，
波多塔：[]
}
)
}
可更新表（poData）{
这是我的国家({
波达塔：波达塔
});
}
render（）{
//在这里，我们将相关状态传递给子组件
//注意，函数是使用'bind'传递给
//确保我们的应用程序范围保持不变
返回(
{
（这个州，伊斯洛格丁）？
:
}
)
}
}
导出默认应用程序；

和Table.js

import React, { Component } from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import $ from 'jquery'; 
import App from '../App';

class Table extends Component {
    constructor(props) {
        super(props);

        this.state = {
            poData: []
        };

        this.getPOs = this.getPOs.bind(this);
    }

    getPOs() {

        var url = 'https://myapi.com';

        //CORS URL so that we can ignore the stupid CORS stuff
        var proxyURL = 'https://cryptic-headland-94862.herokuapp.com/';

        fetch(proxyURL + url).then(response => response.json().then(data => {
            console.log(data);
            console.log(data.length);
            this.props.onUpdateTable(data);
        }));
    }

    componentDidMount() {
        //this.getPOs();        
    }

    componentWillUnmount() {
        //this.setState({ poData: [] });
    }

    render() {

        this.getPOs();

        return (
            <div>
                <BootstrapTable data={this.state.poData} className="table" version='4'>
                    <TableHeaderColumn dataField='poID' isKey>PO ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='poName'>PO Name</TableHeaderColumn>
                    <TableHeaderColumn dataField='poShipDate'>PO Ship Date</TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
    }
}

export default Table;

import React，{Component}来自'React'；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
导入'react bootstrap table next/dist/react-bootstrap-table 2.min.css'；
从“jquery”导入美元；
从“../App”导入应用程序；
类表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
波多塔：[]
};
this.getPOs=this.getPOs.bind（this）；
}
getPOs（）{
var url='1〕https://myapi.com';
//CORS URL，这样我们就可以忽略愚蠢的CORS内容
变量proxyURL=https://cryptic-headland-94862.herokuapp.com/';
获取（proxyURL+url）。然后（response=>response.json（）。然后（data=>{
控制台日志（数据）；
console.log（data.length）；
此.props.onUpdate表（数据）；
}));
}
componentDidMount（）{
//这个.getPOs（）；
}
组件将卸载（）{
//this.setState（{poData:[]}）；
}
render（）{
这个.getPOs（）；
返回(
采购订单编号
采购订单名称
订单发货日期
);
}
}
导出默认表；

您应该发出获取请求并将结果存储在中