如何解决React JS - 如何防止重复提交和触发搜索调用表单
我正在开发一个 React 应用程序,我意识到它允许重复提交。
为了防止这种情况,我将代码更改为非异步。
但这意味着当返回选择显示时,不会触发数据库的自动重新查询。
这是来自 LicenseEdit.js 的更正提交代码,注释掉了之前的异步代码:
//async handleSubmit(event) {
handleSubmit(event) {
event.preventDefault();
if(this.handleValidation()){
} else {
return;
}
const {item,csrfToken} = this.state;
fetch('/api/license' + (item.id ? '/' + item.id : ''),{
// await fetch('/api/license' + (item.id ? '/' + item.id : ''),{
method: (item.id) ? 'PUT' : 'POST',headers: {
'X-XSRF-TOKEN': csrfToken,'Accept': 'application/json','Content-Type': 'application/json'
},body: JSON.stringify(item),credentials: 'include'
});
this.props.history.push('/licenses');
}
这是调用表单 (LicenseList.js) 中的相关代码
componentDidMount() {
this.setState({isLoading: true});
fetch(`/api/license/search/${this.props.searchString}`,{credentials: 'include'})
.then(response => response.json())
.then(data => this.setState({
licenses: data,isLoading: false,licensePage: data.slice(this.state.begin,this.state.end)
}))
.catch(() => this.props.history.push('/'));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。