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

【问题标题】：How to solve TypeError: arr[Symbol.iterator] is not a function in my React project如何解决 TypeError: arr[Symbol.iterator] is not a function in my React project
【发布时间】：2019-09-03 04:31:59
【问题描述】：

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

我查看了所有的钩子，所有变量和类型似乎都是正确的。我认为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 };
};

Projects.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是编译时错误输出的完整截图。

【问题讨论】：

你能显示你调用IndividualProject的代码吗？我有一个疯狂的猜测，这可能是问题所在，如果引发错误的行实际上是在堆栈跟踪中显示的行。或者，可能不是这样 - 当您执行 console.log("Projects: ", projects); 时，记录项目会给您带来什么？
完成，请参阅编辑后的帖子。此外，由于某种原因，似乎没有达到特定的console.log()（没有输出）

标签： javascript reactjs react-hooks

【解决方案1】：

您在 IndividualProject 自定义挂钩的 IndividualProject 组件中使用返回值的方式是错误的：

const [projects, setProjects] = useProjectsValue();

应该是

const { projects, setProjects } = useProjectsValue();

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

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

【讨论】：

谢谢，一定是这样。当我能够测试它时将标记为答案。
谢谢，我打错字了，我花了一个小时才找到我用 [] 而不是 {}。