React页面刷新时Filtered数组空状态短暂显示问题求助

问题根源在于页面刷新时，data初始为空数组，过滤后的filteredData也为空，此时会触发NOT FOUND渲染，直到异步请求完成更新data才会切换到正常列表。要解决这个问题，核心是区分正在加载数据和确实无匹配结果两种状态，具体实现如下：

方案一：增加加载状态变量 #

1. 在组件中定义加载状态：

   const [isLoading, setIsLoading] = useState(true);
   

2. 在数据请求逻辑中更新加载状态（以自定义useFetch为例）：

   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
         const res = await fetch('你的接口地址');
         const fetchedData = await res.json();
         setData(fetchedData);
       } catch (err) {
         console.error('数据请求失败:', err);
       } finally {
         setIsLoading(false);
       }
     };
     fetchData();
   }, []);
   

3. 修改渲染逻辑，优先判断加载状态：

   {isLoading ? (
     <div>加载中...</div> // 可替换为加载动画组件
   ) : filteredData.length > 0 ? (
     filteredData.map(({name}) => (
       <Component key={name} name={name} /> // 务必添加key属性
     ))
   ) : (
     <div>
       <h2>NOT FOUND</h2>
     </div>
   )}
   

方案二：利用filteredData初始值区分状态 #

不需要额外定义isLoading，直接把filteredData初始值设为null：

1. 初始化filteredData：

   const [filteredData, setFilteredData] = useState(null);
   

2. 修改渲染逻辑：

   {filteredData === null ? (
     <div>加载中...</div>
   ) : filteredData.length > 0 ? (
     filteredData.map(({name}) => (
       <Component key={name} name={name} />
     ))
   ) : (
     <div>
       <h2>NOT FOUND</h2>
     </div>
   )}
   

   这种方式下，只有当数据请求完成并执行过滤后，filteredData才会从null变为数组，加载过程中不会触发NOT FOUND的渲染。

内容的提问来源于stack exchange，提问作者artis898