发出 http 请求并在 React 中解析数据

Question

我正在尝试使用基于 React 的前端向我的后端服务器（在 java springboot 上运行）发出一个 http 请求，该前端返回一个我想要解析并分配给值的字符串。从我在语法页面上看到的内容来看，我想相信我正确地调用了请求。我的错误消息提到“无法读取未定义的属性（读取'split'）”，我认为这意味着 split() 不是 js 或 React 的有效操作？有谁知道这个的正确方法是什么？

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;

Answer 1

这是因为尚未设置数据。 axios 返回您必须为此目的使用 await 的承诺。并且你不应该调用 api 那样的 useeffect 是为此目的而构建的

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;

Answer 2

表示data 变量不是字符串。如果要获取数据，还需要使用 useEffect。

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);
        }
      })()

    }, [])
    

Answer 3

实际上您没有正确阅读response，因为它是一个异步操作，并且在您按顺序对其进行操作时您的响应是undefined。

您必须将代码放在.then 的正文中，如下所示：

let dataArr = [];
axios.get("http://localhost:8080/run")
    .then(response => {
        const data = response.data;
        dataArr = data.split(",");
    });