Estoy obteniendo un número primo mediano de una function de servidor Express . Luego, quiero actualizar el número para verificar su valor medio en la interfaz.

Sin embargo, cuando trato de buscar el punto final y actualizar la UI de usuario en la función handleSubmit y actualizar el estado con this.setState({ medianPrimeNumber: this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) }) , obtengo el siguiente error describe :

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

Parece que this.state.medianPrimeNumber devuelve una Promise cuando envié el formulario. No estoy seguro de cómo solucionar esto:

 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

El estado de formValue se actualiza correctamente