Я использую реагирующую загрузочную таблицу для рендеринга таблицы. Я получаю информацию из 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;
EDIT:
Хорошо, я кое-что почистил. Я пробовал материал 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;
и 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;