React Redux - 发布数据后显示对话框不起作用 - 未处理的拒绝(类型错误)：无法读取未定义的属性'openDialog'

Question

我对react redux很陌生。我正试图让一个对话框显示"；成功发布的数据"；通过api发布数据时。我想通过实现它

this.insertSingleUser(postData).then(function () {
console.log("user inserted");
this.openDialog("Data posted successfully");
}); 

除了这篇文章，一切都很好，数据正在发布，控制台结果正在显示，但对话框this.openDialog("Data posted successfully");没有打开。

但是，如果在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);

提前谢谢。

Answer 1

使用箭头函数，以便可以从.then()回调内部访问父this。

像这样：

this.insertSingleUser(postData).then(() => {
console.log("user inserted");
this.openDialog("Data posted successfully");
});

因此，您使用this.insertSingleUser(postData).then(() => {...})和箭头函数，而不是带有function关键字的this.insertSingleUser(postData).then(function() {...})