setState используется, но DataTables не обновляется после добавления или редактирования функции. Пожалуйста, сосредоточьтесь на:
Currency.js
componentWillMount() {
this.setState(
{
listOfCurrency: [],
currency: { currency: '', symbol: '', status: '' },
myCurrencyRate: { exchangeRate: 0, adminFee: 0 },
currencyRateRequest:{exchangeRate:'',processFee:'',earnrate:'',earnAdminFee:''},
myCurrency: { currency:''},
isAdmin:false,
message: '',
snackbar: {
open: false,
vertical: null,
horizontal: null,
},
}
);
var checkAccessRightUrl=properties.domain+properties.checkAccessRightUrl;
this.wsCheckUrlAccess(checkAccessRightUrl,'Currency');
var wsListUrl = properties.domain + properties.currencyList;
this.ws(wsListUrl, false, false, 'get', null, false,'list');
var populateMyMembershipCurrencyRate = properties.domain + properties.populateMembeshipCurrencyRate;
this.wsbind(populateMyMembershipCurrencyRate,'currencyRate');
var myMembershipCurrency = properties.domain + properties.showMyMembershipCurrency;
this.wsbind(myMembershipCurrency,'myMembershipCurrency');
var checkIsAdminUrl = properties.domain + properties.populateCheckIsAdmin;
this.wsbind(checkIsAdminUrl,'checkIsAdmin');
}
ws(wsurl, jsonLibrary, toggle, process, senditem, snackbar,processName) {
var accessToken = sessionStorage.getItem('accessToken');
var reqs;
if (process === 'post') {
reqs = Request.post(wsurl)//wsurl
} else if (process === 'get') {
reqs = Request.get(wsurl)//wsurl
}
reqs.set('Authorization', 'Bearer ' + accessToken)
.set('Content-Type', 'application/json')
if (senditem != null) {
reqs.send(senditem)
}
reqs.end((err, res) => {
if (res.status === 200) {
if (processName === 'currencyRate'){
this.setState(
{
isLoading:false,
currencyRateRequest: res.body,
message: (res.body===null?'':res.body.message),
snackbar: {
vertical: 'top',
horizontal: 'right',
open: snackbar
},
}
);
}else{
this.setState(
{
isLoading:false,
listOfCurrency: (jsonLibrary ? JSON.parse(JSON.stringify(res.body.responses)) : res.body),
message: (res.body===null?'':res.body.message),
snackbar: {
vertical: 'top',
horizontal: 'right',
open: snackbar
},
}
);
}
if (toggle) {
this.togglePrimary();
}
} else {
this.checkSession(res);
console.info('do logout function here');
console.info(err);
}
});
}
onClickSubmitAddCurrency() {
var wsListUrl = properties.domain + properties.addCurrency;
this.ws(wsListUrl, true, true, 'post', this.state.currency, true);
};
render() {
return (
<div className = "animated fadeIn">
<CardBody>
<JSTable id='#currencyTable'
dataSet = {this.state.listOfCurrency} columns = {columns}
onEdit = {this.onClickGotoEdit.bind(this)} onDelete = {this.onClickSubmitDeleteCurrency.bind(this)} />
</CardBody>
</div>
);
}
JSTable.js
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Row,Button } from 'reactstrap';
import '../../css/jquery.dataTables.css';
import '../../css/dataTables.responsive.css';
const $ = require('jquery');
var ReactDOM = require('react-dom');
$.Datatable = require('datatables.net-responsive');
class JSTable extends Component {
constructor(props) {
super(props);
this.state = {
//ajaxurl : props.ajaxurl,
id : props.id,
dataSet : props.dataSet,
columns : props.columns,
onEdit : props.onEdit,
onDelete: props.onDelete,
onTopUp : props.onTopUp,
render : {
edit :props.onEdit==null?{display:'none'}:{display:''},
delete :props.onDelete==null?{display:'none'}:{display:''},
topup :props.onTopUp==null?{display:'none'}:{display:''},
},
indicator:{
edit :props.onEdit==null?true:false,
delete :props.onDelete==null?true:false,
topup :props.onTopUp==null?true:false,
}
};
}
componentDidMount() {
this.$el = $(this.el);
this.$el.DataTable({
// ajax: this.state.ajaxurl,
data: this.state.dataSet,
columns: this.state.columns,
responsive: true,
columnDefs: [{
targets: 0,
createdCell: (td, cellData, rowData, row, col) =>
ReactDOM.render(
<div>
<Button color = "primary" style = {this.state.render.edit}
onClick = {this.state.indicator.edit?this.empty:this.state.onEdit.bind(this.celldata,this,rowData,this.row,this.col)}
className = "mr-1">Edit</Button>
<Button color = "primary" style = {this.state.render.delete}
onClick = {this.state.indicator.delete?this.empty:this.state.onDelete.bind(this.celldata,this,rowData,this.row,this.col)}
className = "mr-1">Delete</Button>
<Button color = "primary" style = {this.state.render.topup}
onClick = {this.state.indicator.topup?this.empty:this.state.onTopUp.bind(this.celldata,this,rowData,this.row,this.col)}
className = "mr-1">Top Up</Button>
</div>, td
),
}
],
});
}
// componentWillUnmount() {
// this.$el.DataTable.destroy(true);
// }
empty(){
console.info('===========no function=================');
}
render() {
return (
<div className = "animated fadeIn">
<table data = {this.state.dataSet} className = "display" width = "100%" ref = {el => this.el = el}>
</table>
</div>
);
}
}
export default JSTable;
Я могу получить данные обновления. Однако это не обновляет таблицу. Если только не обновлю страницу.
Пожалуйста, порекомендуйте.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Самый простой способ обновить или повторно отрендерить компонент - это ключ. Ваш ключ может быть вашей ценностью в вашем штате
state = {counter:null}
Затем, когда данные загружаются из вашего API Используйте setState и увеличивайте свой счетчик
<table key = {this.state.counter}>
//your code
</table>
Реагировать на текущее изображение в галерее изображений
@Keith я дал вам несколько руководств, которые не полностью решают вашу проблему :) "setState используется, но DataTables не обновляется после добавления или редактирования функции" 1 у вас есть некоторые данные 2 функция Add или eddit запускается 3 возьмите / перезагрузите data еще раз 4. Обновите компоненты с помощью ключа Итак, в JSTable.js добавьте эту логику в <table> </table>
Вы можете использовать this.forceUpdate () для повторного рендеринга в reactJs.
Привет @Pio, Спасибо за ответ. Они (счетчик и ключ) добавляются только в Currency.js? Ничего общего с JSTable.js?