未触发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，里面应该有东西。

希望这会有所帮助。