反应避免重新加载组件答案

【问题标题】：React avoid reload of component反应避免重新加载组件
【发布时间】：2022-06-29 22:04:44
【问题描述】：

我们有一个下拉列表，其中包含对后端的获取请求。下拉列表包含某些可能的过滤器。即：客户编号和类型。

当我在其中一个 DDL 中选择某些内容时，我想保留所选值，我认为它正在刷新整个页面。

所以我有两个获取请求，一个用于填充名为“ExportView”的主要内容区域另一个用于获取过滤器值。

将过滤和获取主要内容部分的新数据的函数作为参数发送到搜索字段部分。

我尝试在 handlefilter 函数中设置 event.preventDefault()。也尝试使用 usecallback 钩子，但没有运气。

useEffect(() => {
    setIsLoading(true);
    fetch(process.env.REACT_APP_BASEURL + "exports?take=10&"+ filterExportType + filterClientNumber).then((response) => {
        return response.json();
})
.then((data) => {
    setIsLoading(false);
    setLoadedExports(data);
});
}, [filterClientNumber, filterExportType]);


useEffect(() => {
    fetch(process.env.REACT_APP_BASEURL + "exports/filterselection").then((response) => 
    {
        return response.json();
    })
    .then((data) => {
        setLoadedFilters(data);
    });
}, []);


const handleFilter = useCallback((event) => {
    event.preventDefault();
    if(event.target.name === "exportType")
    {
        if(event.target.value === "")
        {
            setFilterExportType();
        }
        else {
            setFilterExportType("&exportTypeId=" + event.target.value);
        } 
    }
    if(event.target.name === "client")
    {
        if(event.target.value === "")
        {
            setFilterClientNumber("");
        }
        else {
            setFilterClientNumber("&clientNumber=" + event.target.value);
        }
    }
},[]);

if(isLoading)
{
    return (
        <section>
            <p>Loading...</p>
        </section>
    );
}

return(
    <>
       <SearchField handleFilter={handleFilter} selection={loadedFilters}/> 
        <ExportView data={loadedExports}/>
    </>
)

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

你的问题在这里：

   if(isLoading)
   {
      return (
        <section>
            <p>Loading...</p>
        </section>
      );
   }

每次您的第一个效果运行时，您都会将 loading 设置为 true，它会重新渲染整个内容并仅显示加载器。在这种情况下，您将 [filterClientNumber, filterExportType] 作为依赖项，而在 handleFilter 内部，您正在更改状态，因此每次调用 handleFilter 时都会强制执行效果 - 因此，您最终只会在屏幕上使用 loader你打电话给handleFilter的时间。您的解决方案是将加载程序向下移动并具有以下内容：

return(
<>
   <SearchField handleFilter={handleFilter} selection={loadedFilters}/> 
   {
    isLoading &&  
      <section>
        <p>Loading...</p>
      </section> ||
      <ExportView data={loadedExports}/>
    }
</>

)

就像这个过滤器部分会一直在屏幕上一样，加载器只会在界面的一部分显示，同时使用新的过滤器加载数据。像这样，您将避免重新加载整个页面的虚假效果，因为在加载数据时隐藏页面上的所有内容确实没有意义，尤其是当您有触发数据（重新）加载的过滤器时。

【讨论】：