我正在從Express服務器中獲取一個中間質數。然后，我想更新這個數字以檢查它在前端的中值。function
但是，當我嘗試UI在handleSubmit函式中獲取端點并更新并使用更新狀態時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的狀態更新正確
uj5u.com熱心網友回復：
你是對的，this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })確實回傳了一個承諾。
您希望由于該承諾而回傳的價值。換句話說，您想要await該值，因為它是一個異步函式。IE：
async handleSubmit(e) {
const res = await this.fetchMedianPrimeNumber(parseInt(this.state.formValue))
this.setState({ medianPrimeNumber: res })
e.preventDefault()
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/322874.html
標籤：javascript 节点.js 反应 表达
上一篇：快速驗證器不呈現錯誤前端