点击按钮无法展示预加载API数据的React组件问题排查

问题描述 #

我知道这应该很简单，但点击下方按钮时，无法展示预加载的API数据。此前在点击按钮时加载API数据是正常的，但调整为页面加载时预加载API数据、点击按钮再展示后，虽无报错但完全无法显示。请问我哪里出错了？

代码中的错误点 #

• useEffect依赖数组位置错误：你把依赖数组[balldontlie]放在了axios的then回调第二个参数里，这是完全错误的用法。useEffect的依赖数组必须作为useEffect自身的第二个参数传入，否则useEffect会在组件每次渲染时都执行，不仅浪费资源，还可能导致逻辑混乱。
• 空数组判断逻辑错误：balldontlie的初始状态是[]，在JavaScript中，空数组属于“真值”，!balldontlie的结果是false，所以这个判断条件永远不会触发API请求，导致balldontlie一直是空数组，组件自然没有数据可以展示。

修复后的完整代码 #

import React, { useEffect, useState } from "react";
import { Button } from "@mui/material";
import rsLogo from "./logo-with-name.png";
import "./App.css";
import axios from "axios";
import CollapsibleTable from "./Table";

function App() {
  const [balldontlie, setBalldontlie] = useState([]);
  const [weather, setWeather] = useState({});
  const [showTeams, setShowTeams] = useState(false);

  const onShowTeamsClick = () => {
    setShowTeams(!showTeams);
  };

  const fetchListWeather = (row) => {
    let param = `?key=somekey=${row.city}`;
    axios({
      method: "get",
      url: "somewebsite" + param,
    }).then(function (response) {
      setWeather(response.data);
    });
  };

  useEffect(() => {
    // 通过数组长度判断是否为空，确保页面加载时能触发API请求
    if (balldontlie.length === 0) {
      axios({
        method: "get",
        url: "somewebsite",
      }).then(function (response) {
        setBalldontlie(response.data);
      });
    }
  }, [balldontlie]); // 依赖数组放到useEffect的第二个参数位置

  return (
    <div className="App">
      <header className="App-header">
        <img src={rsLogo} className="App-logo" alt="logo" />
      </header>
      <main>
        <Button
          variant="contained"
          onClick={onShowTeamsClick} // 简化点击事件写法
          size="large"
          sx={{ m: 2, bgcolor: "#00003C" }}
        >
          List Teams
        </Button>
        {/* 用&&简化条件渲染逻辑 */}
        {showTeams && (
          <div>
            <CollapsibleTable
              fetchListWeather={fetchListWeather}
              weather={weather}
              balldontlie={balldontlie}
            />
          </div>
        )}
      </main>
    </div>
  );
}

export default App;

额外优化说明 #

• 简化了Button的onClick写法，直接传入函数引用即可，避免不必要的箭头函数包裹。
• 将条件渲染从三元表达式{showTeams ? ... : null}改为{showTeams && ...}，代码更简洁易读。

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