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

Posted 2021-04-06

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

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"}]}

答案

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

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

或使用箭头功能

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

如果你正在使用一些autobind装饰器或如果你在构造函数中绑定函数，那么简单的.then(this.openModal);也应该工作。