Question

我试图使用axios帖子隐藏/显示模态。我收到错误，无法读取属性＆＃39;隐藏＆＃39;未定义的

有什么想法吗？

// dispatch to hide modal
hide() {
    this.props.dispatch(hideModal());
}


// dispatch to show modal
show() {
    this.props.dispatch(
        showError({
            type: 'SHOW_MODAL',
            modalType: 'SHOW_LOADING',
            modalProps: {
                onClose: hideModal,
                text: 'Please complete all fields',
            },
        })
    );
}

submitForm(UserDetails) {
    this.show();

    axios
        .post('http://localhost:3001/api/users', UserDetails)
        .then(function(response) {
            this.hide();
        })
        .catch(function(error) {
            console.log(error);
        });
}

Answer 1

this在axios函数中不是this。你可以试试这个：

submitForm(UserDetails) {
    var self = this;
    self.show();

    axios
        .post('http://localhost:3001/api/users', UserDetails)
        .then(function(response) {
            self.hide();
        })
        .catch(function(error) {
            console.log(error);
        });
}

这些也可以绑定在你的构造函数中：

constructor(props) {
    super(props);

    this.hide = this.hide.bind(this);
    this.show = this.show.bind(this);
}

然后你可以像现在这样使用它们。后者至少使用箭头（=＆gt;）函数，正常函数我不确定this如何引用你的代码，我会选择第一个答案。

Answer 2

在元素的构造函数中绑定hide（）方法。

class MyClass extends React.Component {
    constructor(props) {
        super(props);

        this.hide = this.hide.bind(this);
    }
}

https://facebook.github.io/react/docs/handling-events.html

Answer 3

这是this点问题。

hide = () => {
  this.props.dispatch(...); // 1
}

show = () => {
  this.props.dispatch(...); // 1
}

submitForm = (UserDetails) => {
    this.show();

    axios
        .post('http://localhost:3001/api/users', UserDetails)
        .then((response) => {
          this.hide();  // 2
        })

 }

标记1位置this正确指向，因为xxx = () => {}语法从es7开始。

和标记2的地方this使用箭头功能，所以正确指出。

使用redux隐藏show modal

3 个答案: