使用React Hook，尝试使用forEach获取多个数据
使用React Hook，尝试使用forEach获取多个数据
提问于 2019-08-28 14:00:02
我试图从Figma API获取数据，但不幸的是，我不能在一次调用中完成。我首先需要获取团队中所有项目的列表，然后为每个项目获取文件列表。
下面是我为实现这一点而编写的代码：
const [projects, setProjects] = useState([]);
const [files, setFiles] = useState([]);
useEffect(() => {
const fetchProjects = async () => {
const result = await axios(
`https://api.figma.com/v1/teams/${teamId}/projects`, {
headers: { 'Authorization': `Bearer ${token}` }
});
setProjects(result.data.projects);
};
fetchProjects();
}, []);
useEffect(() => {
projects.forEach(project => {
const fetchFiles = async () => {
const result = await axios(
`https://api.figma.com/v1/projects/${project.id}/files`, {
headers: { 'Authorization': `Bearer ${token}` }
});
setFiles([ ...files, {
projectName: project.name,
files: result.data.files
}])
};
fetchFiles();
})
}, [projects]);我只显式地将projects作为第二个useEffect的依赖项，否则它将创建许多不同的呈现，并且我只想在项目列表中循环。
在我的Figma团队中，我有4个项目。每个文件都有1到5个文件。我希望我的状态文件有4个对象，其中包含项目的名称和它包含的文件列表。
我今天遇到的问题是，第一，我从React得到一些警告，说我需要放置其他依赖项，第二，我的文件状态只填充了最新的项目，而不是所有的4个项目。
回答 1
Stack Overflow用户
发布于 2019-08-28 14:51:08
就状态而言，由于您试图基于闭包变量在循环中更新状态，因此会遇到此问题。相反，您可以使用回调模式来更新状态。这也不会警告您将文件作为依赖项添加到useEffect。
您还可以将fetchFiles函数移出循环。
此外，您还可以选择将setFiles方法添加为依赖项，或者禁用警告，因为它不会影响您的代码。setFiles函数不会在您的代码范围内更改
const [projects, setProjects] = useState([]);
const [files, setFiles] = useState([]);
useEffect(() => {
const fetchProjects = async () => {
const result = await axios(
`https://api.figma.com/v1/teams/${teamId}/projects`, {
headers: { 'Authorization': `Bearer ${token}` }
});
setProjects(result.data.projects);
};
fetchProjects();
}, []);
useEffect(() => {
const fetchFiles = async (id, name) => {
const result = await axios(
`https://api.figma.com/v1/projects/${id}/files`, {
headers: { 'Authorization': `Bearer ${token}` }
});
setFiles(prevFiles => ([ ...prevFiles, {
projectName: name,
files: result.data.files
}]))
};
projects.forEach(project => {
fetchFiles(project.id, project.name);
})
}, [projects]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57685934
复制相关文章
相似问题
腾讯云开发者
