在render方法中修改了函数的访问变量

时间:2018-03-07 06:45:49

标签: javascript reactjs modal-dialog react-modal

我有以下代码(修剪表格和其他一些样板):

import React, { Component } from 'react';
import Modal from 'react-modal';

var responseMessages;
export default class ContactForm extends Component {

handleSubmit(event) {
    responseMessages = []

    fetch('http://127.0.0.1:4000/test', {
        method: 'POST',
        mode: 'cors',
        headers: {
            "Access-Control-Allow-Origin":"*",
            'Content-Type': 'application/json'
            },
        body: JSON.stringify(data)
    }).then((response) => response.json())
    .then((responseJson) => {
        for(var i = 0; i < responseJson.errors.length; i++) {
            responseMessages.push(
                <p>{responseJson.errors[i].msg}</p>
            );
        }
    })
    .then(this.openModal());
}

render() {
  return (
    <div>
    <Modal  isOpen={this.state.modalIsOpen}
            onRequestClose={this.closeModal}
            ariaHideApp={false}
            style={customStyles}>
            <div>
                {responseMessages}
            </div>
   </Modal>
   </div>
)}}

在模态中添加{responseMessages}不会显示任何内容,但如果我将其更改为{console.log(responseMessages)},则会在控制台中显示responseMessages不为空(它具有不同的长度,但不为空) 可能是什么原因?

编辑:openModal功能:

openModal() {
    this.setState({modalIsOpen: true});
}

ResponseJson:

{"errors":[{"location":"body","param":"message","msg":"error message","value":"entered value"}]}

1 个答案:

答案 0 :(得分:0)

这是一个javascript问题,与react无关。 当您编写.then(this.openModal())时,将立即调用openModal函数。所以实际的代码应该是

.then(this.openModal.bind(this));

或使用箭头功能

or .then(() => this.openModal());

如果你正在使用一些autobind装饰器,或者如果你在构造函数中绑定函数,那么只需.then(this.openModal);也可以。