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

Question

我有以下代码（修剪了表格和其他一些样板）：

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>
)}}

在 Modal 中添加 {responseMessages} 什么都不显示，但是如果我将其更改为 {console.log(responseMessages)} 它会在控制台中显示 responseMessages 不为空（它有不同的长度，但不是空的）这可能是什么原因？

编辑：openModal 函数：

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

ResponseJson:

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

Answer 1

这是一个 javascript 问题，与 React 无关。当你写 .then(this.openModal()) 时， openModal 函数将被立即调用。所以实际代码应该是

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

或使用箭头函数

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

如果您正在使用一些自动绑定装饰器，或者如果您在构造函数中绑定函数，那么 .then(this.openModal); 也应该可以工作。

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

Access variable modified in function in render method

javascript

reactjs

modal-dialog

react-modal