Soy un poco nuevo en React. Y obtuve este error: los objetos no son válidos como hijos de React (encontrado: [objeto Promesa]). Y no estoy seguro de cómo solucionar este problema. ¿Pueden echar un vistazo? ¡Gracias!
Aquí está mi código.
import React, { Component } from "react"; import "./App.css"; async function randomVerse() { const url = "https://labs.bible.org/api/?passage=random&type=json"; const passage = await fetch(url); const passageJson = await passage.json(); return passageJson; } const displayRandomVerse = async () => { let result = await randomVerse(); let verse = ""; verse += result[0].text; return verse; }; const returnVerse = displayRandomVerse(); class App extends Component { constructor() { super(); this.state = { verse: null }; } componentDidMount() { this.setState({verse: returnVerse}); }; render() { return ( <div className="App"> <h1>Good Morning, XXX!</h1> <h3>Bible verse : {this.state.verse} </h3> </div> ); } } export default App;Tienes que configurar await en const returnVerse = await displayRandomVerse(); . Esto debería darte el valor.
Debe buscar y esperar en su método componentDidMount
async function randomVerse() { const url = "https://labs.bible.org/api/?passage=random&type=json"; const passage = await fetch(url); const passageJson = await passage.json(); return passageJson; } const displayRandomVerse = async () => { let result = await randomVerse(); let verse = ""; verse += result[0].text; return verse; }; class App extends Component { constructor() { super(); this.state = { verse: null }; } async componentDidMount() { //Notice changes in this section this.setState({verse: await displayRandomVerse()}); }; render() { return ( <div className="App"> <h1>Good Morning, XXX!</h1> <h3>Bible verse : {this.state.verse} </h3> </div> ); } } export default App;