Я использовал простую таблицу (код добавлен ниже) и пытался найти много ссылок, но не смог найти подходящее решение для моей проблемы.Таблица отображается нормально, но проблема начинается, когда какие-либо данные добавляются, обновляются или удаляются.Это не отражается, если страница не обновляется.Несколько способов, которые я попробовал, это обновить состояние, но это не помогает.Я даже попытался обновить компонент принудительно, но тщетно.Я даже пытался отрисовать компонент.
<div className="table">
<table className="table table-striped table-padding">
<thead>
<tr className="heading">
<th className="col-md-2">Image</th>
<th className="col-md-3">Office Name</th>
<th className="col-md-5">Address</th>
<th className="col-md-1"></th>
<th className="col-md-1"></th>
</tr>
</thead>
<tbody>
{
(this.state.dataUpdated) &&
this.state.data.map((list, index) => {
return (
<tr key={index}>
<td><img style={{height: '30px', width: '30px'}} src={list.imageData} alt="icon"/></td>
<td>{list.name}</td>
<td>{list.address}</td>
<td><button type="button" onClick={(e) => this.handleEdit(list.officeId)}><i className="fa fa-pencil" aria-hidden="true"></i></button></td>
<td><button type="button" onClick={(e) => this.handleDelete(list.officeId)}><i className="fa fa-trash" aria-hidden="true"></i></button></td>
</tr>
)
})
}
</tbody>
</table>
</div>
handleEdit(id) {
this.state.data.map(row => {
if(row.officeId === id) {
return (
this.setState({ displayData: row })
)
}
});
this.displayOfficeList();
}
handleDelete(id) {
const { dispatch } = this.props;
dispatch(commonActions.deleteOffice(id));
this.displayOfficeList();
}
displayOfficeList() {
this.toggleFlag();
commonServices.getOfficeList().then((res) => {
let demo = res;
this.setState({ data: demo.content});
this.setState({ dataUpdated: true});
});
}