问题描述
我有一个“添加数据”弹出窗口，它正在正确保存到数据库中。我希望它自动从数据库中获取数据，并在我单击“保存”按钮时将数据检索回用户界面中的表。但是数据没有自动显示在表格上，我仍然需要刷新我的页面才能加载它。我认为这与状态或钩子有关，但我不明白它们是如何工作的。有人可以帮我确定这里似乎是什么问题吗？谢谢。
export default class AddDataPopup extends React.Component {
constructor(props) {
super(props);
this.drpCategorySelected = this.props.selectedHeader.categoryId;
this.txtName = "";
this.txtDescription = "";
}
componentwillReceiveProps(nextProps) {
this.resetField(nextProps.selectedHeader);
}
getDrpCategory = (value) => {
this.drpCategorySelected = value;
this.defineDialog();
}
getTxtName = (event) => {
this.txtName = event.target.value
}
getTxtDescription = (event) => {
this.txtDescription = event.target.value
}
resetField = (selectedHeader) => {
this.drpCategorySelected = selectedHeader.categoryId;
this.txtName = "";
this.txtDescription = "";
this.refs.dialog.hide();
}
//Save button
addData = () => {
var errorMessage = "";
if (this.drpCategorySelected === '' || this.drpCategorySelected === undefined || this.drpCategorySelected === null || this.drpCategorySelected.length === 0) {
errorMessage = "Please select Category<\n>";
}
if (this.txtName.trim() === "" || this.txtName === null || this.txtName === undefined) {
errorMessage += "Please enter Name<\n>";
} else if (this.txtName.trim().length > 100) {
errorMessage += "Name exceeded character limit<\n>";
}
if (this.txtDescription.trim() === "" || this.txtDescription === null || this.txtDescription === undefined) {
errorMessage += "Please enter Description<\n>";
} else if (this.txtDescription.trim().length > 1000) {
errorMessage += "Description exceeded character limit<\n>";
}
if (errorMessage.length > 0) {
errorMessage = errorMessage.split('<\n>').map((item,key) => {
return <span key={key}>{item}<br /></span>;
});
this.props.showAlert("error",errorMessage);
this.refs.dialog.show();
return;
}
this.postCreateNewData();
}
//This function calls data save api,and validate if input already exist,if not then save data
postCreateNewData() {
var id_ = Utilities.getCurrentID();
var token_ = Utilities.getToken();
var url_ = Utilities.getApiHttps();
var data = {
"categoryId": this.drpCategorySelected,"newName": this.txtName.trim(),"newDescription": this.txtDescription.trim()
}
return fetch(url_ + '<path>' + data,{
headers: {
'content-type': 'application/json','Authorization': 'Bearer ' + token_
},method: "POST",body: JSON.stringify(data)
})
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.status === "Success") {
this.props.showAlert("success","Successfully created new data");
this.props.refreshParameterList(true);
this.props.getData();
this.resetField(this.props.selectedHeader);
} else if (responseJson.status === "DATA EXISTS") {
this.props.showAlert("error","Data already exists for selected heading");
this.defineDialog();
this.refs.dialog.show();
}
})
.catch((error) => {
console.error("An error occurred fetching data.");
});
}
defineDialog = () => {
Dialog.setoptions({
defaultCancelLabel: 'Cancel'
});
this.refs.dialog.show({
title: <p className="modal-title-margin">
Add Data
<Glyphicon glyph='remove'
className='close'
onClick={() => this.resetField(this.props.selectedHeader)}
/>
</p>,body: (
<div className="modal-body-margin">
<Col xs={12} md={12}>
<CategoryDropdown
data1={this.getDrpCategory}
initialData={this.drpCategorySelected}
userId={this.props.user_id}
userRole={this.props.role_id}
/>
<FormGroup>
<Label>Name</Label>
<FormControl
type="text"
defaultValue={this.txtName}
onChange={this.getTxtName}
placeholder="Enter Name"
/>
</FormGroup>
<div><Label>Description</Label></div>
<textarea
placeholder="Enter Description"
onChange={this.getTxtDescription}>
</textarea>
</Col>
</Col>
</div>
),bsSize: 'medium',actions: [
Dialog.CancelAction(() => this.resetField(this.props.selectedHeader)),Dialog.Action(
<span>Save</span>,this.addData,'btn btn-success'
)
],onHide: (() => this.resetField(this.props.selectedHeader))
});
}
openPopup = () => {
this.resetField(this.props.selectedHeader);
this.defineDialog();
}
render() {
return (
<row>
<button onClick={this.openPopup}>+ Add New Data</button>
<Dialog ref='dialog' />
</row>
);
}
export default class DataMain extends React.Component {
constructor(props) {
super(props)
this.state = {
nameList: [],categoryList: {},descriptionList = {}
}
this.categoryList = {};
this.descriptionList = {};
}
componentwillReceiveProps(nextProps) {
//Should refresh Data List
if (!this.props.shouldRefreshDataList && nextProps.shouldRefreshDataList) {
this.getData();
this.props.refreshDataList(false);
}
this.setDropdownFilters();
}
setDropdownFilters = () => {
if (this.props.selectedHeader.name === undefined) {
this.refs.drpCategory.applyFilter('');
return;
}
this.refs.drpCategory.applyFilter(this.props.selectedHeader.categoryName);
}
//This function calls Data list api,and fill dataList state
getData = () => {
var id_ = Utilities.getCurrenID();
var token_ = Utilities.getToken();
var url_ = Utilities.getApiHttps();
return fetch(url_ + '<path>' + this.props.user_id,{
headers: {
'content-type': 'application/json','Authorization': 'Bearer ' + token_,'pragma': 'no-cache','cache-control': 'no-cache'
}
})
.then((response) => response.json())
.then((responseJson) => {
this.nameList = {};
this.categoryList = {};
this.descriptionList = {};
for (var x = 0; x < responseJson.length; x++) {
this.categoryList[responseJson[x].categoryName] = responseJson[x].categoryName;
this.descriptionList[responseJson[x].descriptionName] = responseJson[x].description;
}
this.categoryList = sortObject(this.categoryList);
this.descriptionList = sortObject(this.descriptionList);
this.setState({
nameList: responseJson,categoryList: this.categoryList,descriptionList: this.descriptionList
});
})
.catch((error) => {
console.error("An error occured fetching data.");
});
}
}
render() {
return (
<Col xs={12} md={12}>
<br />
<AddDataPopup
getData={this.getData}
refreshParameterList={this.props.refreshParameterList}
showAlert={this.showAlert}
user_id={this.props.user_id}
role_id={this.props.role_id}
selectedHeader={this.props.selectedHeader}
/>
<BootstrapTable
data={this.state.dataList}
striped={true}
hover={true}
scrollTop={'Bottom'}
pagination={true}
>
<TableHeaderColumn
ref="drpCategory"
datafield='categoryName'
tdStyle={{ whiteSpace: 'normal' }}
width='100'
filter={{ type: 'SelectFilter',options: this.state.categoryList,condition: 'eq' }}
>
Category
</TableHeaderColumn>
<TableHeaderColumn
datafield='Name'
dataSort={true}
tdStyle={{ whiteSpace: 'normal' }}
filter={{ type: 'TextFilter' }}
width='100'
>
Name
</TableHeaderColumn>
<TableHeaderColumn
datafield='description'
dataSort={true}
tdStyle={{ whiteSpace: 'normal' }}
width='100'
>
Description
</TableHeaderColumn>
</BootstrapTable>
</Col>
);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）