javascript - 如何解决TypeError : arr[Symbol. iterator] is not a function in my React project

Question

我在关注 this tutorial 时遇到此错误.到目前为止，我已经完全按照他的代码进行操作，但他没有收到此错误。我在教程中的 2:09:30。

我查看了所有的钩子(Hook)，所有的变量和类型似乎都是正确的。我认为这可能是 setSelectedProject() 的错误，但这一调查并未取得成果。 allProjects 和 projects 绝对是数组...

IndividualProject.js

export const IndividualProject = ({ project }) => {
  const [showConfirm, setShowConfirm] = useState(false);
  const [projects, setProjects] = useProjectsValue();
  const { setSelectedProject } = useSelectedProjectValue();
  console.log("Projects: ", projects);
  const deleteProject = docId => {
    firebase
      .firestore()
      .collection("projects")
      .doc(docId)
      .delete()
      .then(() => {
        setProjects([...projects]);
        console.log("Projects from IndividualProject: ", project);
        setSelectedProject("Inbox");
      });
  };
...

src/hooks/Index.js

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

  useEffect(() => {
    firebase
      .firestore()
      .collection("projects")
      .where("userId", "==", "PO1n5mxjYYpcnq9joPZl")
      .orderBy("projectId")
      .get()
      .then(snapshot => {
        const allProjects = snapshot.docs.map(project => ({
          ...project.data(),
          docId: project.id
        }));
        console.log(typeof allProjects);
        if (JSON.stringify(allProjects) !== JSON.stringify(projects)) {
          setProjects(allProjects);
        }
      });
  }, [projects]);
  return { projects, setProjects };
};

项目.js

export const Projects = ({ activeValue = null }) => {
  const [active, setActive] = useState(activeValue);
  const { setSelectedProject } = useSelectedProjectValue();
  const { projects } = useProjectsValue();
  return (
    projects &&
    projects.map(project => (
      <li
        key={project.projectId}
        data-doc-id={project.docId}
        data-testid="project-action"
        className={
          active === project.projectId
            ? "active sidebar__project"
            : "sidebar__project"
        }
        onClick={() => {
          setActive(project.projectId);
          setSelectedProject(project.projectId);
        }}
      >
        <IndividualProject project={project} />
      </li>
    ))
  );
};

Here是编译时错误输出的完整屏幕截图。

Answer 1

您在 useSelectedProjectValue 自定义 Hook 的 IndividualProject 组件中使用返回值的方式是错误的:

const [projects, setProjects] = useProjectsValue();

应该是

const { projects, setProjects } = useProjectsValue();

React 使用 array destructuring e. G。对于他们的 useState，但是您的 useSelectedProjectValue Hook 返回的是对象而不是数组，因此您必须在具有对象解构的组件中使用它。或者将自定义钩子(Hook)的返回值改为数组。

如果您想了解有关此主题的更多信息，我建议您阅读 Kent C. Dodds'博客:https://kentcdodds.com/blog/react-hooks-array-destructuring-fundamentals