React.js中从函数提取数据更新year变量问题求助

你的问题核心在于**year是普通变量而非React状态变量**，直接修改它不会触发组件重渲染，也无法让依赖year的useEffect重新执行拉取数据的逻辑。以下是具体修改方案：

步骤1：将year转为状态变量 #

用useState声明year，这样更新它时会触发组件重渲染，同时让依赖它的useEffect自动执行：

// 替换原来的const year = 2016
const [year, setYear] = useState(2016); // 初始值设为2016

步骤2：修改pull_data函数更新状态 #

pull_data不需要返回数据，直接调用setYear更新状态即可：

const pull_data = (data) => {
  console.log(data);
  setYear(data); // 用传入的data更新year状态
}

步骤3：清理useEffect的依赖注释（可选但推荐） #

去掉// eslint-disable-next-line react-hooks/exhaustive-deps注释，因为现在year是状态变量，属于合法的依赖项，ESLint不会再报错。

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { useNavigate } from "react-router-dom";
import { auth } from "../firebase";
import Header from "../components/headerTeamList";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import TeamList from "../components/teamList";
import { getTeams } from "../api/football-api";
import Menu from "../components/dropdownMenu";

const useStyles = makeStyles({
  root: {
    padding: "60px",
  },
});

function Dashboard() {
  const [user, loading, error] = useAuthState(auth);
  const navigate = useNavigate();
  const classes = useStyles();
  const [teams, setTeams] = useState([]);
  // 修改1：将year转为状态变量
  const [year, setYear] = useState(2016);

  // 修改2：更新pull_data函数，用setYear修改状态
  const pull_data = (data) => {
    console.log(data);
    setYear(data);
  }

  useEffect(() => {
    if (loading) return;
    if (!user) return navigate("/");
  }, [user, loading]);

  // 修改3：去掉eslint注释，依赖项保留year
  useEffect(() => {
    getTeams(year).then((json) => {
      setTeams(json.response[0].league.standings[0]);
    });
  }, [year]);

  return (
    <Grid container className={classes.root}>
      <Grid item xs={12}>
        <Header title="Home Page" />
        <Menu func={pull_data}></Menu>
      </Grid>
      <Grid item container spacing={5}>
        <TeamList teams={teams}></TeamList>
      </Grid>
    </Grid>
  );
}

export default Dashboard;

这样修改后，当子组件通过pull_data传入新的年份数据时，year状态会更新，触发依赖year的useEffect重新执行，调用getTeams拉取对应年份的球队数据，最终更新teams状态并渲染页面。

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