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

Question

我在学习本教程时遇到此错误。到目前为止，我完全遵循了他的代码，但他没有收到此错误。我在教程中的 2:09:30。

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

个人项目.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");
      });
  };
...

源代码/钩子/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>
    ))
  );
};

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

Answer 1

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

const [projects, setProjects] = useProjectsValue();

应该

const { projects, setProjects } = useProjectsValue();

React 使用数组解构，例如为它们的useState，但是你的useSelectedProjectValue钩子返回的是一个对象而不是一个数组，所以你必须在具有对象解构的组件中使用它。或者将自定义钩子的返回值更改为数组。

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