Reactjs React Redux-发布数据后显示对话框无效-未经处理的拒绝（TypeError）：无法读取属性'；openDialog'；未定义的
我是一个新的反应redux。我试图得到一个对话框显示“数据发布成功”后，通过api发布的数据。我希望通过以下方式实现这一目标：Reactjs React Redux-发布数据后显示对话框无效-未经处理的拒绝（TypeError）：无法读取属性'；openDialog'；未定义的,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我是一个新的反应redux。我试图得到一个对话框显示“数据发布成功”后，通过api发布的数据。我希望通过以下方式实现这一目标： this.insertSingleUser(postData).then(function () { console.log("user inserted"); this.openDialog("Data posted successfully"); }); 除此
this.insertSingleUser(postData).then(function () {
console.log("user inserted");
this.openDialog("Data posted successfully");
});
this.openDialog（“数据已成功发布”）未打开
但是，如果在this.insertSingleUser（postData）.then（function（）{
之外调用，对话框将打开
请在这里告诉我我做错了什么。完整代码粘贴在下面：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { postUser } from '../redux/user/userActions';
import AlertDialog from '../reusables/AlertDialog';
class UsersContainerPost extends Component {
constructor(props) {
super(props);
this.state = {
first_name: '',
last_name: '',
phone: '',
email: '',
address: '',
city: '',
state: '',
message: '',
dialogIsOpen: false,
dialogHeaderText: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
openDialog = (dialogHeaderMessage) => {
this.setState({
dialogIsOpen: true,
dialogHeaderText: dialogHeaderMessage
})
}
closeDialog = () => {
this.setState({
dialogIsOpen: false
})
}
handleChange = (field, event) => {
this.setState({ [field]: event.target.value })
}
async insertSingleUser(postData) {
return this.props.insertUser(postData);
}
handleSubmit(event) {
// alert('A name was submitted: ' + this.state.name);
event.preventDefault();
const {
first_name,
last_name,
phone,
email,
address,
city,
state
} = this.state;
const postData = {
first_name: first_name,
last_name: last_name,
phone: phone,
email: email,
address: address,
city: city,
state: state
};
// console.log(this.state);
// console.log(postData);
// alert('hi');
// this.props.insertUser(postData);
// console.log("user inserted");
this.insertSingleUser(postData).then(function () {
console.log("user inserted");
this.openDialog("Data posted successfully");
});
console.log("message" + this.props.message);
// (this.props.message) ? this.openDialog("Data posted successfully") : this.openDialog("Data POst error");
}
render() {
return (
<div>
<h1>Add New User</h1>
<form onSubmit={this.handleSubmit}>
<div>
<label>First Name:</label>
<input
type="text"
value={this.state.first_name}
onChange={(event, newValue) => this.handleChange('first_name', event)} />
</div>
<div>
<label>Last Name:</label>
<input
type="text"
value={this.state.last_name}
onChange={(event, newValue) => this.handleChange('last_name', event)} />
</div>
<div>
<label>Phone:</label>
<input
type="text"
value={this.state.phone}
onChange={(event, newValue) => this.handleChange('phone', event)} />
</div>
<div>
<label>Email:</label>
<input
type="text"
value={this.state.email}
onChange={(event, newValue) => this.handleChange('email', event)} />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<div>
Notice Message : {this.props.message}
</div>
<div>
<Link to='/'>Go Home</Link>
</div>
{/* {this.props.message ? (<AlertDialog open={this.state.dialogIsOpen} onClose={this.closeDialog} />) : ('')} */}
<AlertDialog
headerMessage={this.state.dialogHeaderText}
open={this.state.dialogIsOpen}
onClose={this.closeDialog}
/>
</div>
);
}
}
const mapStateToProps = state => {
// console.log(state.user.successMessage);
return {
message: state.user.successMessage
}
}
const mapDispatchToProps = dispatch => {
return {
insertUser: postData => dispatch(postUser(postData))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(UsersContainerPost);
import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../redux/user/userActions”导入{postaser}；
从“../reusables/AlertDialog”导入AlertDialog；
类UsersContainerPost扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
电话：''，
电子邮件：“”，
地址：''，
城市：''，
声明：''，
消息：“”，
错，
dialogHeaderText:“”，
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
openDialog=（dialogHeaderMessage）=>{
这是我的国家({
没错，
dialogHeaderText:dialogHeaderMessage
})
}
closeDialog=（）=>{
这是我的国家({
对话本：错
})
}
handleChange=（字段、事件）=>{
this.setState（{[field]：event.target.value}）
}
异步insertSingleUser（postData）{
返回此.props.insertUser（postData）；
}
handleSubmit（事件）{
//警报（“已提交名称：”+this.state.name）；
event.preventDefault（）；
常数{
名字，
姓，
电话，
电子邮件，
地址:，
城市
状态
}=本州；
常量postData={
名字：名字，
姓氏：姓氏，
电话:电话,，
电邮:电邮,，
地址:地址:，
城市:城市,，
州：州
};
//console.log（this.state）；
//console.log（postData）；
//警报（“hi”）；
//此.props.insertUser（postData）；
//console.log（“用户插入”）；
这个.insertSingleUser（postData）.then（函数（）{
console.log（“用户插入”）；
此.openDialog（“数据发布成功”）；
});
console.log（“message”+this.props.message）；
//（this.props.message）？this.openDialog（“数据发布成功”）：this.openDialog（“数据发布错误”）；
}
render（）{
返回(
添加新用户
名字：
this.handleChange（'first_name'，event）}/>
姓氏：
this.handleChange（'last_name'，event）}/>
电话：
this.handleChange（'phone'，event）}/>
电邮：
this.handleChange（'email'，event）}/>
注意消息：{this.props.Message}
回家吧
{/*{this.props.message？（）：（''）}*/}
);
}
}
常量mapStateToProps=状态=>{
//console.log（state.user.successMessage）；
返回{
消息：state.user.successMessage
}
}
const mapDispatchToProps=调度=>{
返回{
插入器：postData=>dispatch（姿势器（postData））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（UsersContainerPost）；
提前感谢。使用箭头函数，以便可以从内部访问父此
。然后（）
回调
像这样：
this.insertSingleUser（postData）。然后（（）=>{
console.log（“用户插入”）；
此.openDialog（“数据发布成功”）；
});
因此，您可以使用this.insertSingleUser（postData）.然后使用this.insertSingleUser（postData）.而不是this.insertSingleUser（postData）.然后（（）=>{…}）
和arrow函数使用arrow函数，这样就可以从内部访问父this
.then（）
回调
像这样：
this.insertSingleUser（postData）。然后（（）=>{
console.log（“用户插入”）；
此.openDialog（“数据发布成功”）；
});
因此，与使用function关键字的this.insertSingleUser（postData）.then（function（）{…}）
不同，您可以使用this.insertSingleUser（postData）.然后使用箭头函数的（（）=>{…}）