React中用Axios解析JSON渲染表格遇错误，新手求指导

核心问题点 #

• 未导入*useState*：代码中使用了useState但未从react导入，直接触发语法错误。
• 无限重渲染循环：在组件渲染逻辑中直接调用请求函数，每次渲染都会触发请求并更新状态，导致组件反复渲染。
• 未定义函数：getXML()和getString()未实现，会抛出函数未定义错误。
• return语法错误：{ child }是对象字面量，React无法直接渲染对象，需直接使用child变量。
• 错误处理缺失：Axios的catch块为空，无法排查请求失败的原因。
• 无效状态打印：console.log(data)在setData后立即执行，由于*setState*是异步操作，此时打印的仍是旧状态。

修复后的代码 #

import axios from "axios";
import { useState, useEffect } from "react"; // 补全必要钩子的导入

function FilmTableRows(props) {
  const dataFormat = props.dataFormat;
  const [data, setData] = useState([]);
  const baseURL = "http://localhost:8080/FilmRestful/filmapi";

  const getJson = () => {
    let config = {
      headers: {
        "data-type": "json",
        "Content-type": "application/json",
      },
    };
    axios
      .get(baseURL, config)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.error("JSON数据请求失败:", err); // 添加错误日志便于排查
      });
  };

  // 补全缺失的函数基础实现（可根据实际需求完善）
  const getXML = () => {
    console.log("XML格式数据请求逻辑待实现");
    // 此处添加XML数据获取与解析逻辑
  };

  const getString = () => {
    console.log("字符串格式数据请求逻辑待实现");
    // 此处添加字符串格式数据处理逻辑
  };

  // 使用useEffect控制请求时机，仅当格式切换时发起请求
  useEffect(() => {
    switch (dataFormat.value) {
      case "json":
        getJson();
        break;
      case "xml":
        getXML();
        break;
      default:
        getString();
    }
  }, [dataFormat.value]); // 依赖项：仅当格式值变化时执行

  // 生成表格行
  const tableRows = data.map((el) => (
    <tr key={el.id}>
      <td>{el.title}</td>
      <td>{el.year}</td>
      <td>{el.director}</td>
      <td>{el.stars}</td>
      <td>{el.review}</td>
    </tr>
  ));

  // 优化空状态提示
  return (
    <>
      {data.length > 0 ? tableRows : <tr><td colSpan="5">加载中...</td></tr>}
    </>
  );
}

export default FilmTableRows;

关键修复说明 #

• 用*useEffect*控制请求时机：将请求逻辑放入useEffect，并以dataFormat.value为依赖项，确保仅当格式切换时发起请求，彻底解决无限重渲染问题。
• 修复语法与依赖问题：补全useState和useEffect的导入，修正return语句的对象渲染错误。
• 添加错误处理：在Axios的catch块中打印错误信息，便于排查请求失败问题。
• 补全缺失函数：为未实现的请求函数添加基础框架，避免未定义错误。
• 优化用户体验：数据为空时显示加载提示，替代空白状态。

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