useEffect 未触发

Question

这是我的useProjects自定义钩子：

    export const useProjects = () => {
      const [projects, setProjects] = useState([]);

      useEffect(() => {
        firebase
          .firestore()
          .collection("projects")
          .where("userId", "==", "cMFAHqzXw9mQRar9eln7")
          .orderBy("projectId")
          .get()
          .then(snapshot => {
            const allProjects = snapshot.docs.map(project => {
              return {
                docId: project.id,
                ...project.data()
              };
            });

            if (JSON.stringify(allProjects) !== JSON.stringify(projects)) {
              setProjects(allProjects);
            }
          });
      }, [projects]);

  return { projects };
};

当我在某处使用它时，不会触发useEffect部分。 我究竟做错了什么 ？ 像这样使用它：

const { projects, setProjects } = useProjects();

这将返回空数组。 我已经将console.log放在useEffect但它没有被触发。

Answer 1

你使用钩子的方式有问题。

在您的 useProject 中，您将返回一个包含projects的 json，但是当您使用它时，您会再次从返回值中提取它，因此它将为空。 你再次提取...

const { projects, setProjects } = useProjects();

所以两个projects和setProjects都将是未定义的，

将您的返回更改为

return {projects, setProjects}

或 juz 只需将其更改为

const projects = useProjects();

然后控制台你的projects ，里面应该有东西。

希望这可以帮助。