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

Question

我在尝试使用本地数据创建无限滚动的 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 状态的长度，我无法加载其余数据。到底是bug还是我直接引用改的？

这是问题的可视化部分。

.length 被调用之前

调用.length后

谢谢！

Answer 1

是的，如果你这样做 newArr = oldArr 你只是在复制引用，所以你对它们中的任何一个所做的任何更改都会反映在两者中，如果你想克隆一个数组，请改为这样做

let numberListHelper = [...filteringAirports]

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

How to create a flatlist with infinite scroll with local data? (Possible useState misuse)

javascript

jsx

reactjs

react-native

react-native-flatlist

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

How to create a flatlist with infinite scroll with local data? (Possible useState misuse)

javascript

jsx

reactjs

react-native

react-native-flatlist

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