应用筛选后如何在React UI中重新渲染列表项？

需求背景 #

页面通过useEffect获取数据，调用determineWhatToMap()展示内容；全局Context中会筛选特定分类的数组并设置sorted状态。希望每当useEffect的依赖项（categoryName、sorted）变化时，展示排序后的数组，但不清楚useEffect的else代码块及r-side区域的编写逻辑。

代码修改方案 #

1. 优化useEffect逻辑（移除else块冗余操作） #

无需在else块做“触发重载”操作，当sorted或categoryName变化时组件会自动重渲染。useEffect只需保证首次进入分类时数据加载完成，后续直接使用全局状态即可：

useEffect(()=>{
  const fetchData = async () =>{
    const response = await Promise.all(determineFetch(categoryName)?.map((el)=>{
      return fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${el}`).then(response => response.json())
    }))
    // 合并多接口返回的餐品数组（原response是多个{meals: [...]}结构的数组）
    const mergedData = response.flatMap(res => res.meals || [])
    determineCategory(mergedData, categoryName)
  }

  const currentData = determineWhatToMap(categoryName)
  // 仅当前分类数据为空时发起请求
  if (!currentData || currentData.length === 0) {
    fetchData()
  }
  // else块无需额外操作，依赖项变化时组件会自动重绘并使用最新的sorted状态
},[categoryName,sorted])

注：原determineCategory接收的是未合并的接口响应数组，需改为存入合并后的一维数组，否则后续筛选、渲染会出现嵌套数组问题。

2. r-side区域渲染排序后的数据 #

优先使用全局Context的sorted筛选结果，若sorted为空（未筛选或无匹配结果），则回退到原始分类数据：

<div className='r-side'>
  {
    (sorted.length > 0 ? sorted : determineWhatToMap(categoryName))?.map((meal, index) => (
      <div key={index} className='meal-card'>
        <img src={meal.strMealThumb} alt={meal.strMeal} />
        <h3>{meal.strMeal}</h3>
        {/* 可添加其他餐品展示内容 */}
      </div>
    ))
  }
</div>

3. 额外注意事项 #

• 确保全局Context中的sorted状态是针对当前categoryName的筛选结果，避免不同分类的筛选数据混淆。
• 若determineCategory函数逻辑未适配合并后的一维数组，需同步修改该函数的赋值逻辑，保证全局状态存储的是扁平化的餐品数组。

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