Reactjs 具有React钩链功能的多个过滤器

您好，我已经创建了一个带有多重过滤器的搜索栏，它可以工作，但功能之间过于依赖。这里的问题是这些函数正在处理多个情况。 是否有可能通过链接来减轻每个功能，以及如何实现？我真的不明白链接的方法。 谢谢

import React，{useState，useffect}来自“React”；
从“/Search”导入搜索；
从“/Anime”导入动画；
导入“/App.css”；
const KIJAN_API_URL=”https://api.jikan.moe/v3/top/anime/1/upcoming";
常量应用=（）=>{
const[animes，setAnimes]=useState（[]）；
const[sortedAnimes，setSortedAnimes]=useState（[]）；
常量[searchValue，setSearchValue]=useState（“”）
常量[filterByType，setFilterByType]=useState（“”）；
常量[FilterByear，SetFilterByear]=useState（“”）；
useffect（（）=>{
获取（KIJAN_API_URL）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（“出了问题”）；
}
})
。然后（jsonResponse=>{
setAnimes（jsonResponse.top）；
})
.catch（错误=>{
console.log（错误）；
});
}, []);
useffect（（）=>{
const callFilterByType=result=>{
如果（filterByType==“”）{
CallFilterByEAR（结果）；
控制台日志（结果）；
}否则{
结果=结果.filter（anime=>anime.type===filterByType）；
CallFilterByEAR（结果）；
控制台日志（结果）；
}
};
const callFilterByYear=result=>{
如果（FilterByEAR==“”）{
设定时间（结果）；
}否则{
const regex=new RegExp（`${filterByYear}`，gi”）；
result=result.filter（anime=>regex.test（anime.start_date））；
设定时间（结果）；
控制台日志（结果）；
}
};
如果（searchValue==“”）{
callFilterByType（动画）；
}否则{
const regex=new RegExp（`${searchValue}`，gi”）；
console.log（“搜索：”，searchValue）；
const result=animes.filter（anime=>regex.test（anime.title））；
callFilterByType（结果）；
控制台日志（结果）；
}
}，[searchValue，动画，filterByType，FilterByEar]）；
返回(
{sortedAnimes.length>0(
SorterDanimes.map（（动画，索引）=>{
返回；
})
) : (
奥库恩对应
)}
);
};
导出默认应用程序；

您可以这样进行第一轮简化：

useEffect(() => {
    let result = [...animes];

    if(searchValue) {
      const searchRegex = new RegExp(`${searchValue}`, "gi");
      result = result.filter(anime => searchRegex.test(anime.title));      
    }

    if(filterByType) {
      result = result.filter(anime => anime.type === filterByType);      
    }

    if(filterByYear) {
      const yearRegex = new RegExp(`${filterByYear}`, "gi");
      result = result.filter(anime => yearRegex.test(anime.start_date));
    }
    setSortedAnimes(result);

}, [searchValue, animes, filterByType, filterByYear]);

它可以简化为更紧凑的形式，如：

useEffect(() => {
    const searchRegex = searchValue && new RegExp(`${searchValue}`, "gi");
    const yearRegex = filterByYear && new RegExp(`${filterByYear}`, "gi");
    const result = animes.filter(anime => 
      (!searchRegex || searchRegex.test(anime.title)) &&
      (!filterByType || anime.type === filterByType)) &&
      (!yearRegex || yearRegex.test(anime.start_date))
    )
    setSortedAnimes(result);
}, [searchValue, animes, filterByType, filterByYear]);

更惯用的方法是使用momoise钩子。i、 e.将分拣机作为状态移除，并

const sortedAnimes = useMemo(() => {
    const searchRegex = searchValue && new RegExp(`${searchValue}`, "gi");
    const yearRegex = filterByYear && new RegExp(`${filterByYear}`, "gi");
    return animes.filter(anime => 
      (!searchRegex || searchRegex.test(anime.title)) &&
      (!filterByType || anime.type === filterByType)) &&
      (!yearRegex || yearRegex.test(anime.start_date))
    )
}, [searchValue, animes, filterByType, filterByYear]);

---

请看，只需将逻辑的每个部分划分为各自的

useffect

。Hello@Alvaro感谢您的见解，但我不认为我无法使用3种不同的useffect管理数据，即使它们监视不同的输入。主要问题是，这些函数必须通过协同工作或单独工作来给出结果。如果我在同一个数组上工作，UseEffect将设置未定义的值，因此我无法在其他UseEffects中使用它们，而这些UseEffects必须使用该值@ArBabacar_uu。重构代码可能会有所帮助。使用

useState

和

useffect

。很难说清楚，因为我们不知道

searchValue、animes、setSortedAnimes

是从哪里来的。哦，对不起@Alvaro searchValue来自我的SearchBar组件，animes来自API，setSortedAnimes在应用过滤器时更新了数组animes。你能共享完整的组件吗？我问这个问题是因为我不确定

setSortedAnimes

是否属于

useState

或者它是如何修改抓取的动画的。上面的

useMemo

语句将被用作其他state语句之后的

[sortedDanimes，setSortedAnimes]=useState（[]）

语句的替换。使用

useMemo

您将不需要在原始代码中使用第二种效果（与执行过滤一样）。如果您可以在一些在线沙盒中提供示例工作代码，如codesandbox、codepen等，则很容易检查。它更干净。我知道我会更干净，我会让您知道谢谢

const sortedAnimes = useMemo(() => {
    const searchRegex = searchValue && new RegExp(`${searchValue}`, "gi");
    const yearRegex = filterByYear && new RegExp(`${filterByYear}`, "gi");
    return animes.filter(anime => 
      (!searchRegex || searchRegex.test(anime.title)) &&
      (!filterByType || anime.type === filterByType)) &&
      (!yearRegex || yearRegex.test(anime.start_date))
    )
}, [searchValue, animes, filterByType, filterByYear]);