Reactjs-我试图在弹出窗口中处理和事件，但在事件执行后，弹出窗口并没有按应有的方式呈现

Question

我有一个函数，当用户点击reactjs应用程序弹出窗口上的按钮时会调用它。

sendAnswer = () => {
event.preventDefault();
console.log(this.answer);
const data = { answer: this.answer };
const requestInfo = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json'
}),
};
fetch('http://www.mocky.io/v2/5d920649310000d48110ccd7', requestInfo)
.then(response => {
if(response.ok) {
console.log('ok')
this.setState({sentAnswer: true})
return response.json()
}
throw new Error("Erro ao enviar a resposta...");
})
.catch(e => {
this.setState({ message: e.message });
});
}

我在render((中有以下代码：

{!this.state.sent ? (
<textarea type="text" id="form10" className="md-textarea form-control" rows="3" onChange={e => this.answer = e.target.value} placeholder="Insira a sua resposta aqui" />
) : ( 
<Alert color="primary" className="text-center"> Message was sent! </Alert>
)}  

但是，弹出窗口不会刷新。sendAswer函数正在被调用和执行，但我需要刷新弹出窗口，并在执行后显示消息"message was send！"。

我该怎么做？

Answer 1

this.setState({sentAnswer: true})

这是您正在更新的状态，但您的条件基于!this.state.sent。

将条件更改为!this.state.sentAnswer或this.setState({sent: true})。我相信这就是事实，只是打字错误。