useeffect() 在react 中运行return() 后运行并将数据设置为变量？如何处理？

Question

export default function Education() {
  const classes = useStyles();
  const [projects, setProjects] = useState({});

  useEffect(() => {
    axios.get("http://127.0.0.1:8000/api/").then((res) => {
      setProjects(res.data);
      console.log(res.data);
    });
  }, [projects]);

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={12}>
          <Typography variant="h4" color="secondary">
            Some of my work
          </Typography>
        </Grid>

        {projects.map((project) => {
          return <p key={project.id}>{project.name}</p>;
        })}

      </Grid>
    </div>
  );
}

我想在页面渲染时从 api 获取数据，但实际情况是，

1. 用 null 初始化的变量项目
2. return () 在 projects.map() 函数所在的位置运行。
3. 由于项目变量没有任何数据，因此地图不是在项目上运行的有效函数。
4. 然后 useeffect() 正在运行。

这就是为什么我得到错误：

TypeError：projects.map 不是函数

我该如何解决这个问题。我是新来的反应。谁能帮帮我。

Answer 1

你不需要在 useEffect 中指定项目，只需使用一个空数组即可。 由于您正在使用 useState 并存储项目的价值。将其保持在 useEffect 将进行无限调用。 使用地图功能时还要检查projects.length

useEffect(() => {
 axios.get("http://127.0.0.1:8000/api/").then((res) => {
  setProjects(res.data);
  console.log(res.data);
 });
}, []);
 return (
  <div className={classes.root}>
  <Grid container spacing={3}>
    <Grid item xs={12} sm={12}>
      <Typography variant="h4" color="secondary">
        Some of my work
      </Typography>
    </Grid>

    {projects.length && projects.map((project) => {
      return <p key={project.id}>{project.name}</p>;
    })} 

  </Grid>
</div>
);

Answer 2

将项目的默认值设为数组，这样它就不会返回错误：

 const [projects, setProjects] = useState([]);

目前它是一个对象（而不是你说的 null）。

另外，更新您的useEffect，不要传递projects：

  useEffect(() => {
    axios.get("http://127.0.0.1:8000/api/").then((res) => {
      setProjects(res.data);
    });
  }, []);

否则它会使您的应用崩溃，因为它会创建一个无限循环（如果projects 不断变化），因为它会在您每次更新项目时触发 useEffect。