我有以下代码(修剪表格和其他一些样板):
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"}]}
答案 0 :(得分:0)
这是一个javascript问题,与react无关。
当您编写.then(this.openModal())
时,将立即调用openModal
函数。所以实际的代码应该是
.then(this.openModal.bind(this));
或使用箭头功能
or .then(() => this.openModal());
如果你正在使用一些autobind装饰器,或者如果你在构造函数中绑定函数,那么只需.then(this.openModal);
也可以。