“无法读取未定义的属性'问题'” Reactjs

Question

我正在使用 gitbeaker 从 gitlab API 获取项目，在获取项目后，我使用 useState 保存项目对象，现在我想获取另一个 API，其 URL 在该对象中，但每当我尝试访问该对象时URL，出现错误“无法读取未定义的属性'问题'”。 这是我的代码：

const [project, setProject] = useState<any>({});
  const api = new Gitlab({
    host: "https://example.com",
    token: "my token",
  });

  useEffect(() => {
    (async () => {
      const projectsPromises = await api.Projects.all().then((allprojects) => {
        return allprojects;
      });

      Promise.all(projectsPromises).then((data) => {
        setProject(data.find((element) => element.id === 338));
      });
    })();

    return () => {};
  }, []);

  console.log(project);
  console.log(project._links.issues);
  fetch(project._links.issues).then((res) => console.log(res));

console.log(项目);给我 {} 并在一段时间后打印对象，这就是为什么当我尝试使用 project._links.issues 它是未定义的，因为我认为它尚未解决但我不知道如何使它工作。

我解决了这个问题在 useEffect 钩子中获取数据并将 api 的响应保存在 state 中，以便稍后在我的代码中访问它，就像那样

const [issues, setIssues] = useState<any>([]);

 Promise.all(projectsPromises).then((data) => {
        const celoProject: any = data.find((element) => element.id === 338);
        setProject(celoProject);
        const projectIssues = fetch(celoProject._links.issues)
          .then((res) => res.json())
          .then((allIssues) => {
            setIssues(allIssues);
          });
      });

如果有人有更好的方法或解释为什么我无法在 useEffect 之外访问它，请告诉我。

Answer 1

useEffect 挂钩内的任何内容都只会在页面首次加载时执行（因为您提供了一个空数组作为第二个参数）。它之外的任何东西都将在每次渲染时执行（每次道具或状态更改）。这就是为什么它第一次记录{}，因为效果是异步的，并且在组件渲染之前还没有完成。

您应该在第一个 API 请求完成后在 useEffect 挂钩中运行第二个提取。需要更多信息来确定除此之外究竟发生了什么。

const [project, setProject] = useState<any>({});
const api = new Gitlab({
  host: "https://example.com",
  token: "my token",
});

useEffect(() => {
  (async () => {
    const projectsPromises = await api.Projects.all().then((allprojects) => {
      return allprojects;
    });

    Promise.all(projectsPromises).then((data) => {
      const projectResponse = data.find((element) => element.id === 338)
      setProject(projectResponse)
      fetch(projectResponse._links.issues).then((res) => {
        console.log(res)
        // Do something with this response
      });
    });
  })();

  return () => {};
}, []);

console.log(project);
console.log(project._links.issues);