如何使用本地数据创建具有无限滚动的平面列表？（可能使用状态误用）答案

【问题标题】：How to create a flatlist with infinite scroll with local data? (Possible useState misuse)如何使用本地数据创建具有无限滚动的平面列表？（可能使用状态误用）
【发布时间】：2023-04-06 09:39:01
【问题描述】：

我在尝试使用本地数据创建无限滚动的 FlatList 时遇到问题。我希望列表每次到达底部时加载 20 个不同的元素。这是列表：

                <FlatList
                  contentContainerStyle={styles.airportLatestSearchlist}
                  data={filteredAirportList}
                  renderItem={renderAirportItem}
                  keyExtractor={(item) =>
                    filteredAirportList.indexOf(item).toString()
                  }
                  onEndReached={increaseTotalFilteredResults}
                  onEndReachedThreshold={0.1}
                />

一旦用户开始在搜索框中输入，就会加载数据 filteredAirportList。这是过滤已经存储的数据的功能。

  const filterAirportSearch = (value) => {
    const managedValue = value.toLowerCase();
    const filteringAirports = airportList.filter(
      (airport) =>
        airport.airport_name?.toLowerCase().includes(managedValue) ||
        airport.city?.toLowerCase().includes(managedValue) ||
        airport.country?.toLowerCase().includes(managedValue) ||
        airport.icao?.toLowerCase().includes(managedValue) ||
        airport.iata?.toLowerCase().includes(managedValue),
    );
    var numberListHelper = filteringAirports;
    numberListHelper.length = numberElementsList;
    setTotalFilteredAirportList(filteringAirports);
    setFilteredAirportList(numberListHelper);
  };

这是用户滚动到底部时调用的函数：

  const increaseTotalFilteredResults = () => {
    let numberHelper = numberElementsList;
    if (numberHelper < totalFilteredAirportList.length) {
      numberHelper = numberElementsList + 20;
    }
    setNumberElementsList(numberHelper);

    if (Object.keys(totalFilteredAirportList).length > 0) {
      let filteredListUpdate = totalFilteredAirportList;
      filteredListUpdate.length = numberHelper;
      setFilteredAirportList(filteredListUpdate);
    }
  };

但是，每次调用此函数时：

numberListHelper.length = numberElementsList;

它也改变了 filteringAirports 状态的长度，我无法加载其余数据。它实际上是一个错误还是我直接通过引用进行了更改？

这是问题的视觉部分。

在 .length 被调用之前

.length 被调用后

谢谢！

【问题讨论】：

标签： javascript reactjs react-native jsx react-native-flatlist

【解决方案1】：

是的，如果您这样做 newArr = oldArr，您只是在复制引用，因此您对其中任何一个所做的任何更改都将反映在两者中，如果您想克隆一个数组，请改为这样做

let numberListHelper = [...filteringAirports]

【讨论】：

没错。我完全忘记了这一点。谢谢！