ReactJS组件问题：API数据初始化不显示，搜索过滤功能冲突

核心问题分析 #

你当前的矛盾点很明确：

• 渲染posts时，初始posts是空数组，页面加载后无数据展示
• 渲染allData时，搜索操作会更新posts但渲染源未切换，导致搜索结果不生效

同时你的submitSearch函数存在逻辑漏洞：连续两次调用setPosts，后一次会直接覆盖前一次的结果，相当于只应用了距离筛选，类别筛选的结果被完全丢弃。

修复步骤 #

1. 解决初始显示全量数据的问题

有两种简洁的实现方式：

方式一：初始化时同步全量数据到posts

在获取全量数据的useEffect中，同时更新posts状态：

useEffect(() => {
  fetch("URL/item-list/")
    .then((res) => res.json())
    .then((data) => {
      setAllData(data);
      setPosts(data); // 新增该行，让初始状态下posts等于全量数据
    })
    .catch((e) => console.log("ERROR", e));
}, []);

之后渲染部分保持posts.map(...)即可，初始显示全量数据，搜索后posts会被更新为筛选结果。

方式二：渲染时动态切换数据源

保持现有状态逻辑不变，修改渲染代码：

{/* 替换原有的posts.map逻辑 */}
{(posts.length > 0 ? posts : allData).map((post) => {
  // 原有的卡片渲染代码保持不变
})}

2. 修复搜索功能的逻辑错误

当前你分别请求了类别筛选和距离筛选的接口，但两次setPosts会导致数据覆盖，需要根据后端接口支持情况调整：

• 如果后端支持多条件合并筛选（推荐方案），直接调用合并接口：

async function submitSearch(event) {
  event.preventDefault();
  try {
    // 假设后端提供了支持类别+距离的筛选接口，调整URL参数
    const response = await fetch(
      `URL/item-filter/?categories=${categoriesSelected}&distance=${distance}&lat=${lat}&lng=${lng}`
    );
    const data = await response.json();
    setPosts(data);
  } catch (error) {
    console.error(error);
  }
}

• 如果只能分开调用两个接口，需要在前端手动合并筛选结果（取交集）：

async function submitSearch(event) {
  event.preventDefault();
  try {
    const response1 = await fetch(
      `URL/item-categories-list/?categories=${categoriesSelected}`
    );
    const response2 = await fetch(
      `URL/item-list-distance/?distance=${distance}&lat=${lat}&lng=${lng}`
    );
    const data1 = await response1.json();
    const data2 = await response2.json();
    // 根据id匹配，取两个结果的交集
    const filteredData = data1.filter(item1 => 
      data2.some(item2 => item2.id === item1.id)
    );
    setPosts(filteredData);
  } catch (error) {
    console.error(error);
  }
}

额外优化建议 #

• 给Multiselect绑定value属性，确保选中状态与categoriesSelected同步：

<Multiselect
  // 原有属性不变
  value={categoriesSelected}
/>

• 可以添加加载状态，在数据请求完成前显示加载提示，提升用户体验。

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