在提交调用React中端点的表单时更新UI有问题

Question

我正在获取中位数素数从Express服务器function。然后，我想要更新这个数字来检查它在前端的中位数。

然而，当我试图获取端点&更新handleSubmit函数中的UI;使用this.setState({ medianPrimeNumber: this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })更新状态，我得到以下错误描述:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

当我提交表单时，this.state.medianPrimeNumber似乎返回Promise。我不知道如何解决这个问题:

import { React, Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
medianPrimeNumber: null,
formValue: ''
};
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({ formValue: e.target.value })
}
handleSubmit(e) {
this.setState({ medianPrimeNumber: this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })
e.preventDefault()
}
componentDidMount() {
this.fetchMedianPrimeNumber(17)
.then(res => this.setState({ medianPrimeNumber: res.server
}))
.catch(err => console.log(err))
}

fetchMedianPrimeNumber = async (numberToCheck) => {
const response = await fetch(`/median-prime-number/${numberToCheck}`)
const body = await response.json()
if (response.status !== 200) {
throw Error(body.message) 
}
return body;
};

render() {
return (
<div className="App">
<h1>Median Number Playground</h1>
{ this.state.formValue }
<p className="App-intro">{ this.state.medianPrimeNumber}</p>
<form onSubmit={this.handleSubmit}>
<label>
Enter number:
<input type="text" value={this.state.formValue} onChange={this.handleChange} />
</label>
</form>
</div>
);
}
}
export default App

formValue的状态更新正常

Answer 1

你是正确的，this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })确实返回一个承诺。

你想要返回的值作为该承诺的结果。换句话说，您希望await这个值，因为它是一个异步函数。即:

async handleSubmit(e) {
const res = await this.fetchMedianPrimeNumber(parseInt(this.state.formValue))
this.setState({ medianPrimeNumber: res })
e.preventDefault()
}