如何根据静态查询的结果在Gatsby中设置初始状态值?

Question

我正在尝试制作一个视频过滤UI。它将有一个网格的视频和一些过滤器在侧边栏。我的视频是我从Gatsby静态查询中获得的项/对象数组。

我的一个过滤器(来自一个material-ui Autocomplete组件)生成一个标签数组，例如["data science", "javascript"]。我正在尝试根据过滤器中的标签是否与任何视频标签匹配来过滤视频列表。

我不知道如何使这个gatsby组件按我想要的方式有状态。

• 我希望能够给我的VideosGrid组件的所有视频在初始加载时(因为没有设置过滤器)

• 我有能够调用setFilterTags的多芯片组件

• 我试着用useEffect来听filterTags的变化然后触发状态变化并更新通过的视频到视频网格组件

• 但是我不知道如何使盖茨比数据有状态。当我我试过了，const [filteredItems, setfilteredItems] = useState([data.allItem.edges]);坏了，因为我的视频网格组件没有任何东西要加载。

export default function LandingPage() {
const classes = useStyles();
const data = useStaticQuery(graphql`
query MainIndexQuery {
allItem(sort: {fields: view_count, order: DESC}) {
edges {
node {
title
tags
stuff
}
}
}
}
`);
const [filterTags, setFilterTags] = useState([]);
const [filteredItems, setfilteredItems] = useState([data.allItem.edges]);
// ```this doesn't seem to work.```;
//  let filteredItems = data.allItem.edges; // this works
useEffect(() => {
filteredItems = filteredItems.filter(function (el) {
return el.node.tags.some((tag) => filterTags.includes(tag));
});
// I want to call setState here
}, [filterTags]);
// setFilterTags gets invoked by my chip filtering UI component...
return (
<>
<MultiChip setFilterTags={setFilterTags} />
<VideosGrid locations={filteredItems} />
</>
);
}

Answer 1

我想你应该使用:

const [filteredItems, setfilteredItems] = useState(data.allItem.edges);

edges(来自data.allItem.edges)本身就是一个图像数组，所以你不需要对它进行换行。

此外，为了避免突变警告，我建议克隆数据的状态数组。下面的代码将创建一个浅克隆:

useEffect(() => {
let clonedArray= [...filteredItems];
filteredItems = clonedArray.filter(function (el) {
return el.node.tags.some((tag) => filterTags.includes(tag));
});
// I want to call setState here
}, [filterTags]);