Estoy tratando de hacer una solicitud http a mi servidor backend (ejecutado en java springboot) con mi frontnend basado en React, que devuelve una cadena que quiero analizar y asignar a los valores. Por lo que he visto en las páginas de sintaxis, quiero creer que estoy llamando a la solicitud correctamente. Mi mensaje de error menciona "No se pueden leer las propiedades de undefined (leyendo 'dividir')", lo que creo que significa que split () no es una operación válida para js o React. ¿Alguien sabe cuál es la forma correcta de hacer esto?
import React from 'react'; import './App.css'; import Exchange from './Exchange' import Recommendations from './Recommendations'; import axios from "axios"; function Middle(){ const response = axios.get("http://localhost:8080/run"); const data = response.data; const dataArr = data.split(","); return ( <div className = 'Middle'> <h1>{data}</h1> <Exchange name = "Coinbase" btcBuy = {dataArr[1]} btcSell = "" ethBuy = "" ethSell = ""/> <Exchange name = "Binance" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/> <Recommendations/> </div> ); }; export default Middle;Significa que la variable data no es una cadena. También necesita usar useEffect si desea obtener datos.
import React, { useState, useEffect } from "react"; function Middle(){ const [data, setData] = useState([]); useEffect(() => { (async () => { try { const response = await axios.get("http://localhost:8080/run"); const data = response.data; setData(data); // use split if you have to, I dont think you need that. } catch(err) { console.error(err); } })() }, [])En realidad, no lee la response correctamente, ya que es una operación asíncrona y su respuesta no está undefined en el momento en que realiza operaciones en ella de forma secuencial.
Tienes que colocar tu código en el cuerpo de .then , así:
let dataArr = []; axios.get("http://localhost:8080/run") .then(response => { const data = response.data; dataArr = data.split(","); });Es porque los datos aún no están configurados. axios devuelve la promesa de que debe usar await para ese propósito. y no deberías llamar a api como ese useeffect está construido para ese propósito
import React from 'react'; import './App.css'; import Exchange from './Exchange' import Recommendations from './Recommendations'; import axios from "axios"; function Middle(){ const [data,setData] = React.useState(null) useEffect(()=>{ //will get rid of warning of memory leak let mounted = false if(!mounted){ axios.get("http://localhost:8080/run") .then(data=>setData(data)) .catch(err=>//do something); } return ()=>mounted= true },[]) return ( <div className = 'Middle'> <h1>{data}</h1> <Exchange name = "Coinbase" btcBuy = {dataArr[1]} btcSell = "" ethBuy = "" ethSell = ""/> <Exchange name = "Binance" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/> <Recommendations/> </div> ); }; export default Middle;