No estoy seguro de por qué mi respuesta API no se muestra en la interfaz de usuario. Sin embargo, muestra con éxito la respuesta en la consola.
Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {resultado}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
import React from 'react' import { useState, useEffect } from 'react' import axios from 'axios' import * as ReactBootStrap from 'react-bootstrap' const TextGenerator = () => { const [usertext, setUsertext] = useState('hello') let [result, setResult] = useState(null) let [loading, setLoading] = useState(true) const handleSubmit = (e) => { e.preventDefault() // const text = { usertext } axios .get(`http://127.0.0.1:8000/computer programming`) .then((res) => { console.log(res) console.log(res.data) result = res.data setResult({ result }) setLoading(false) }) .catch((error) => console.error(`Error: ${error}`)) } return ( <div className='text-center .w-75'> <br /> <form onSubmit={handleSubmit}> <input type='text' required size='80' placeholder='Enter text...' value={usertext} onChange={(e) => setUsertext(e.target.value)} /> <button>Generate Text</button> </form> <div> {loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }} </div> </div> ) } export default TextGeneratorReact ve debajo del object cuando intenta representar el result en el state .
{ result: { result: <your_data - res.data> } }Probar
{loading ? <ReactBootStrap.Spinner animation='grow' /> : result}en vez de
{loading ? <ReactBootStrap.Spinner animation='grow' /> : { result }} React no puede representar un object como { result }
Y aún fallará ya que envuelve y guarda el result como un object .
Cambio
setResult({ result })A
setResult(result) Esto seguirá fallando si res.data no es un tipo de string o array de JSX /elementos de string .