React中发起HTTP请求解析数据时调用split报错如何解决？

• 报错和split()方法本身无关，split()是JS标准内置字符串方法，完全支持在React项目中使用
• 核心问题是axios.get()是异步方法，调用后返回的是Promise对象而非直接的响应结果，你用同步方式直接取response.data时请求还未完成，data值为undefined，调用undefined的split方法才会抛出该错误
• React组件渲染是同步执行的，异步请求结果不能直接在组件顶层同步取值使用

需要配合React的useState存储响应数据、useEffect触发异步请求，同时兼容请求未完成时的渲染逻辑，参考代码如下：

import React, { useState, useEffect } from 'react';
import './App.css';
import Exchange from './Exchange'
import Recommendations from './Recommendations';
import axios from "axios";

function Middle(){
    // 定义state存储响应数据，初始值设为空字符串
    const [data, setData] = useState('');
    // 定义加载状态优化用户体验，也可以避免渲染时报错
    const [loading, setLoading] = useState(true);

    // 组件挂载时触发异步请求
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get("http://localhost:8080/run");
                // 请求成功后把返回的字符串存入state
                setData(response.data);
            } catch (err) {
                console.error('请求失败：', err);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []); // 空依赖数组表示只在组件挂载时执行一次请求

    // 用可选链调用split，避免data为空时抛出错误，兜底默认设为空数组
    const dataArr = data?.split(",") || [];
    
    // 请求过程中显示加载状态，避免未拿到数据时渲染子组件传值异常
    if (loading) return <div className='Middle'>加载中...</div>;

    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;

• 需要确认后端SpringBoot服务已经配置CORS跨域允许，否则运行在localhost:3000的前端请求会被浏览器安全策略拦截
• 如果接口返回的字符串拆分后长度不确定，建议对数组取值增加兜底默认值，避免取到undefined传给子组件出现异常
• 可根据业务需要补充请求失败的错误提示逻辑

内容的提问来源于stack exchange，提问作者vynabhnnqwxleicntw