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

我正在尝试制作一个视频过滤用户界面。它将有一个视频网格和侧边栏中的一些过滤器。我的视频是我从盖茨比静态查询中获得的一系列项目/对象

我的一个过滤器（来自material ui Autocomplete组件）生成一个标签数组，例如

[“数据科学”，“javascript”]

。我正在尝试根据过滤器中的标记是否与任何视频标记匹配来筛选视频列表

我不知道如何以我想要的方式使这个盖茨比组件有状态

• 我想能够给我的VideosGrid组件所有的视频 初始加载时（因为没有设置过滤器）

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

  setFilterTags

• 我正在尝试使用useEffect来监听

  filterTags

  然后触发状态更改并更新通过的视频 到视频网格组件

• 但我不知道如何使盖茨比数据有状态。当我 已尝试，

  const[filteredItems，setfilteredItems]=useState（[data.allItem.edges]）它会断开，因为我的视频网格
  组件没有任何要加载的内容
  
  

导出默认函数LandingPage（）{
const classes=useStyles（）；
常量数据=useStaticQuery（graphql`
查询MainIndexQuery{
allItem（排序：{fields:view\u count，order:DESC}）{
边缘{
节点{
标题
标签
东西
}
}
}
}
`);
常量[filterTags，setFilterTags]=useState（[]）；
常量[filteredItems，setfilteredItems]=useState（[data.allItem.edges]）；
//“这似乎不起作用。”；
//让filteredItems=data.allItem.edges；//这样做有效
useffect（（）=>{
filteredItems=filteredItems.filter（函数（el）{
返回el.node.tags.some（（tag）=>filterTags.includes（tag））；
});
//我想打电话到这里
}，[filterTags]）；
//setFilterTags被我的芯片过滤UI组件调用。。。
返回(
);
}

我想您应该使用：

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

那么

useState（data.allItem.edges）

呢？