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

标签 javascript reactjs react-hooks

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

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

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

最佳答案

您在 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

关于javascript - 如何解决TypeError : arr[Symbol. iterator] is not a function in my React project,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57765074/

相关文章:

javascript - 使用 JavaScript 的 Selenium Webdriver,如何使用 chrome.exe 的特定路径启动 Chrome?

javascript - HTML 在事件时设置轮播图像 src

javascript - 从 FETCH API JSON 响应中删除字段和键

javascript - React 仅重新渲染网格中更改的元素

javascript - TypeError dispatcher.useState 在使用 React Hooks 时不是一个函数

reactjs - 在事件处理程序中调用 Hook (useMutation) 错误 : "Hooks can only be called inside of the body of a function component"

javascript - React 点击处理程序不工作并将 ="[object Object]"写入 DOM

javascript - 条件渲染不起作用,因为变量尚未定义

Javascript Web 动画 API 还是 CSS 动画关键帧?

javascript - 重定向延迟导致临时显示不正确的组件