过滤器和数据缺少依赖关系答案

【问题标题】：Filter and data have missing dependency过滤器和数据缺少依赖关系
【发布时间】：2022-01-27 08:18:46
【问题描述】：

我的代码有一个问题，我需要通过“id”进行过滤，这是我得到的错误“React Hook useEffect has missing dependencies: 'data' and 'filterData'.要么 include them or remove the dependency数组。



 useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content]);

【问题讨论】：

标签： javascript reactjs filter

【解决方案1】：

你需要为data和filterData添加依赖

  useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content, filterData, data]);

您可以使用以下代码。这是更好的实现。

useEffect(() => {
  if(data){
   const filteredData = content === "" ? data : data.filter((item) => item.Id === content);
   setFilterData(filteredData);
   }
 }, [content, data]);

【讨论】：

这意味着，filterData 是未定义的。您可以将其处理为 const filtersData = filterData?.filter((item) => item.Id === content);

【解决方案2】：

您仅在 useEffect 块中将 content 声明为依赖项，但实际上您也在使用 data（这是一个道具）和 filterData（来自 useState()）。

这些是依赖项，错误消息说您也需要声明它们（意味着您的 useEffect 块将在其依赖项之一更改时执行）或完全删除依赖项（意味着您的 useEffect 块将只执行一次）：

 useEffect(() => {
       if (content === "") {
         setFilterData(data); 
         return;
       }
    
       const filteredData = filterData.filter((item) => item.Id === content);
       setFilterData(filteredData);
     }, 
     [content, data, filterData] // or [] for no depencencies
 );

【讨论】：