React Native删除筛选条件后页面数据未更新问题求助

兄弟，我看了你的代码，发现几个可能导致删除筛选后页面不更新的核心问题，给你梳理下修复思路：

1. 直接修改状态数组，React无法感知变化 #

你删除品牌时用了brandName.splice(index, 1)，这是原地修改数组的操作，React的状态更新依赖引用变化，这种操作不会触发组件重新渲染。必须创建新数组来更新状态：

// 替换原有的 brandName.splice(index, 1);
const updatedBrands = [...brandName]; // 复制原数组
updatedBrands.splice(index, 1);
setBrandName(updatedBrands); // 调用对应的状态更新函数（假设你用useState定义brandName）

2. 删除筛选后未重置数据列表，仍在追加旧数据 #

你的loadMoreData2和getProductsBySort逻辑是为加载更多设计的（往现有列表追加数据），但删除筛选后应该请求全新的筛选结果，而不是在旧数据后拼接。需要调整逻辑：

• 在删除筛选的点击事件里，先重置数据列表和偏移量：

// TouchableOpacity的onPress修改为：
const updatedBrands = [...brandName];
updatedBrands.splice(index, 1);
setBrandName(updatedBrands);
setCptValue(cptValue - 1);
let sort = trie > 0 ? trie : 4;

// 重置数据和偏移量，准备重新请求
setinformationsBySort([]);
setLocalOffset(0);
setOffset(0); // 如果offset是独立状态的话

if (updatedBrands.length > 0) {
  loadMoreData2(itemId, sort, updatedBrands, multiSliderValue);
} else if (sort) {
  loadMoreData2(itemId, sort + 4, [], multiSliderValue);
} else {
  setCheckSort(false);
}

• 同时修改getProductsBySort，根据偏移量判断是重置请求还是加载更多：

// getProductsBySort中更新数据的逻辑修改：
if (newArray.length > 0) {
  if (localOffset === 0) {
    // 重置请求：直接替换现有数据
    setinformationsBySort(newArray);
  } else {
    // 加载更多：追加到现有列表
    setinformationsBySort([...updatedList, ...newArray]);
  }
  setOffset(offset + 5);
}

3. 避免闭包陷阱导致的状态更新错误 #

loadMoreData2里直接使用localOffset和informationsBySort可能会因为闭包拿到旧状态值，建议用函数式更新确保拿到最新状态：

const loadMoreData2 = (itemId, sort, brandName, multiSliderValue) => {
  if (isLoading) {
    console.log("Je passe par ici");
    return;
  }
  setIsLoading(true);
  getProductsBySort(itemId, sort, brandName, multiSliderValue, localOffset)
  .then((response) => {
    if (response) {
      if (localOffset === 0) {
        setinformationsBySort(response);
      } else {
        setinformationsBySort(prev => [...prev, ...response]); // 函数式更新
      }
      setLocalOffset(prev => prev + 5); // 函数式更新
    } else {
      console.log("NO RESPONSE");
    }
  })
  .catch((error) => {
    console.log("error: ", error);
  })
  .finally(() => {
    setIsLoading(false);
  });
};

你可以先试试这些修改，应该能解决删除筛选后页面不更新的问题。如果还是不行，可以打印下请求参数和接口返回的response，确认是不是请求本身没拿到新数据~

备注：内容来源于stack exchange，提问作者Nicolas