如何解决TypeError:arr[Symbol.iterator]不是我的React项目中的函数

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");
});
};
...

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>
))
);
};

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

Answer 1

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

const [projects, setProjects] = useProjectsValue();

应该是

const { projects, setProjects } = useProjectsValue();

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

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