React项目中useEffect钩子本地环境无法触发问题求助

问题背景 #

我正在开发React项目，尝试用useEffect钩子调用GET接口，但useEffect似乎完全没触发，其余功能正常。相同代码在在线沙箱可正常运行，但本地环境不行。已检查package.json依赖版本，也从头创建新项目，问题依旧。使用Mac M1设备，之前功能正常，怀疑和Ventura系统更新有关。

代码示例 #

import { useEffect, useState } from "react";
import axios from "axios";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import { makeStyles } from "@mui/styles";
import { styled } from "@mui/material/styles";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import AdjustIcon from "@mui/icons-material/Adjust";
import Rating from "@mui/material/Rating";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import "./MenuList.css";

const StyledRating = styled(Rating)({
  "& .MuiRating-iconFilled": {
    color: "#ff6d75"
  },
  "& .MuiRating-iconHover": {
    color: "#ff3d47"
  }
});

const theme = createTheme({
  components: {
    Box: {
      defaultProps: {
        padding: 0
      }
    }
  }
});
const useStyles = makeStyles((theme) => ({
  buttonHolder: {
    position: "absolute",
    bottom: "1px",
    right: "3px",
    letterSpacing: "1px",
    padding: "5px"
  },
  addButtons: {
    backgroundColor: "#2a265f",
    border: "0",
    borderRadius: "50px",
    boxShadow: "0 10px 10px rgb(0 0 0 / 20%)",
    color: "#fff",
    fontSize: "18px",
    padding: "4px 8px",
    cursor: "pointer"
  },
  categoryHolder: {
    display: "inline-flex",
    verticalAlign: "middle"
  }
}));

const baseURL = "";

const App = () => {
  const [menu, setMenu] = useState("");

  console.log("before useEffect:", menu);

  useEffect(() => {
    axios.get(baseURL + "/menuGet").then((response) => {
      setMenu(response.data);
    });
    console.log("res:");
  }, []);

  console.log("after useEffect", menu);

  const classes = useStyles();
  console.log("menu", menu);

  return (
    <ThemeProvider theme={theme}>
      <Grid className="courses-container" item xs={12}>
        <Grid>
          {menu !== ""
            ? menu.map((item) => {
                return (
                  <Grid className="course">
                    <Box className="course-preview">
                      <Box
                        component="img"
                        className="dish-image"
                        src={
                          "https://foodappdata.s3.ap-south-1.amazonaws.com/josh/" +
                          item.image
                        }
                        alt={"the menu picture for" + item.itemName}
                      />
                    </Box>
                    <Grid className="course-info">
                      <Box className={classes.categoryHolder} component="span">
                        {" "}
                        <AdjustIcon
                          sx={{
                            color: "green",
                            display: "inline",
                            fontSize: "small"
                          }}
                        />
                        <h6> &nbsp;Dish Category</h6>{" "}
                      </Box>
                      <h5>{item.itemName}</h5>
                      <h5>&#x20B9; {item.price}</h5>
                      <StyledRating
                        name="customized-color"
                        defaultValue={2}
                        getLabelText={(value) =>
                          `${value} Heart${value !== 1 ? "s" : ""}`
                        }
                        precision={0.5}
                        icon={<FavoriteIcon fontSize="inherit" />}
                        emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
                        size="small"
                      />
                      <Box className={classes.buttonHolder} component="span">
                        <Box component="button" className={classes.addButtons}>
                          -
                        </Box>{" "}
                        1{" "}
                        <Box component="button" className={classes.addButtons}>
                          +
                        </Box>
                      </Box>
                    </Grid>
                  </Grid>
                );
              })
            : null}
          <Grid className="course">
            <Box className="course-preview">
              <Box component="img" className="dish-image" src="./logo512.png" />
            </Box>
            <Grid className="course-info">
              <Box className={classes.categoryHolder} component="span">
                {" "}
                <AdjustIcon sx={{ color: "green", display: "inline" }} />
                <h6> &nbsp;Dish Category</h6>{" "}
              </Box>
              <h5>Chicken Tangdi Kebab</h5>
              <h5>&#x20B9; 369</h5>
              <StyledRating
                name="customized-color"
                defaultValue={2}
                getLabelText={(value) =>
                  `${value} Heart${value !== 1 ? "s" : ""}`
                }
                precision={0.5}
                icon={<FavoriteIcon fontSize="inherit" />}
                emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
                size="small"
              />
              <button className="btn">Add</button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
};

export default App;

排查方案 #

1. 确认useEffect是否真的未执行 #

在useEffect内部添加明确的日志输出，同时捕获接口错误：

useEffect(() => {
  console.log("useEffect 已触发");
  axios.get(baseURL + "/menuGet")
    .then(res => {
      console.log("接口返回:", res.data);
      setMenu(res.data);
    })
    .catch(err => {
      console.error("请求失败:", err.message);
    });
}, []);

打开浏览器控制台查看日志，判断是钩子未执行，还是接口请求失败。

2. 检查网络与系统权限 #

• 查看浏览器Network面板，确认是否有请求发出，以及请求的状态码、地址是否正确。
• 检查Mac Ventura的系统设置 > 网络 > 防火墙，确保开发服务器允许出站请求。
• 关闭浏览器的隐私/广告拦截插件，部分插件会拦截本地API请求。

3. 处理M1架构兼容性问题 #

• 重新安装依赖，强制使用x86架构兼容模式：

  arch -x86_64 npm install
  

• 升级Node.js到v18及以上版本，新版本对M1 Ventura的兼容性更完善。

4. 清除缓存与重启服务 #

• 清除React开发服务器缓存：

  npm start -- --reset-cache
  

• 关闭所有终端进程，重新启动项目，避免热重载导致的钩子异常。

5. 排查React Strict Mode影响 #

React 18的Strict Mode在开发环境会双重执行副作用，若代码存在隐含冲突，可能导致异常。临时注释index.js中的<React.StrictMode>标签，测试useEffect是否正常执行。

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