Question

很抱歉，如果这是某些其他帖子的副本。我尝试遵循建议的解决方案，但仍然出现此VirtualizedList: You have a large list that is slow to update...错误。

我有一个带有FlatList的底页

const renderBottomSheetRestaurantList = () => (
  <View style={{ height: topSnapPoint }}>
    <FlatList
      ref={restaurantList}
      data={restaurants}
      keyExtractor={(item) => `row-${item.id}`}
      renderItem={renderRestaurantRows}
      onEndReached={() => {
        setLoadMore(true);
      }}
    />
  </View>
);

const [loadMore, setLoadMore] = useState(false);
  useEffect(() => {
    if (loadMore) {
      initSearch({ searchQuery, region, filterOptions, priceOptions, loadMore });
    }
    return () => {
      setLoadMore(false);
    };
  }, [filterOptions, initSearch, loadMore, priceOptions, region, searchQuery]);

它呈现了这一点

const renderRestaurantRows = ({ item }: { item: Restaurant }) => {
    return <RestaurantListRow {...item} navigation={navigation} route={route} />;
  };

RestaurantListRow使用React.memo希望避免像许多地方建议的那样重新渲染：

const RestaurantListRow: React.FC<Restaurant & RestaurantNavigationProps> = React.memo(
  (item) => {
    const {
      id,
      name,
      rating,
      reviews,
      meals,
      location,
      coordinates,
      open_now,
      opening_hours,
    } = item;

    return (
      <View>
        <RestaurantDetails
          id={id}
          name={name}
          rating={rating}
          reviews={reviews}
          meals={meals}
          location={location}
          coordinates={coordinates}
          open_now={open_now}
          opening_hours={opening_hours}
          containerStyles={styles.something}
        />
        <Divider />
      </View>
    );
  },
  () => true
);

export default RestaurantListRow;

onEndReached被击中3次并加载60条记录，然后我得到错误消息：

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 5760.33349609375,
  "dt": 2381,
  "prevDt": 1025,
}

这绝不是长列表。

我一定做错了什么，但是怎么办？

FlatList VirtualizedList：您的列表很大，更新很慢

0 个答案: