分享
三行代码  ›  专栏  ›  技术社区  ›  Samit

React Redux-发布数据后显示对话框不工作-未处理的拒绝(TypeError):无法读取未定义的属性“openDialog”

  •  0
  • Samit  · 技术社区  · 1 周前

    我对雷杜的反应很新。我试图得到一个对话框显示“数据发布成功”时,通过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);
    

    提前谢谢。

    1 回复  |  直到 1 周前
        1
  •  1
  •   fortunee    1 周前

    使用箭头函数 this 可从内部进入 .then() 回拨。

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

    所以 this.insertSingleUser(postData).then(function() {...}) 对于function关键字,使用 this.insertSingleUser(postData).then(() => {...}) 使用箭头功能