Реагировать на рендеринг FlatList

Question

Я новичок в RN, и у меня возникли проблемы с отображением элементов из API с помощью плоского списка. Я использую разбиение на страницы с сервера для возврата 10 элементов на запрос и функцию loadMore для изменения страницы и получения новых данных. Проблема в том, что когда я прокручиваю несколько раз (4-5 страниц), я получаю эту ошибку, и я не понимаю, как ее исправить! Я буду очень благодарен, если кто-нибудь сможет мне исправить. Заранее спасибо! введите описание изображения здесь

вот моя функция извлечения API =>

    export const fetchProducts = (page) => {
  return async (dispatch) => {
    dispatch(fetchingFromServer());
    try {
      await fetch(SITE_URL + products + `&page=${page}` + '&per_page=12' + AUTH_PARAMS)
        .then((res) => res.json())
        .then((json) => dispatch(fetchingProductsSuccess(json)));
    } catch (err) {
      dispatch(fetchinProductsFailed(err));
    }
  };
};

вот мой flatList =>

   <FlatList
              data={data || []}
              numColumns={2}
              maxToRenderPerBatch={5}
              keyExtractor={(item, index) => {
                return `${item.name}-${index}`;
              }}
              renderItem={({ item }) => {
                return this._renderItem(item);
              }}
              onEndReached={() => this.loadMoreData()}
              onEndReachedThreshold={2}
              ListFooterComponent={this.renderFooter.bind(this)}
            />

вот функция рендеринга элемента =>

_renderItem(item) {
    return (
      <View style={styles.containerP}>
        <Image style={styles.image} source={{ uri: item.images[0].woocommerce_thumbnail }} />
        <Text numberOfLines={1} style={styles.name}>
          {item.name}
        </Text>
        {item.regular_price !== '' && item.price + '' !== item.regular_price + '' ? (
          <View style={styles.prices}>
            <Text style={styles.price_discounted}>{item.regular_price}лв</Text>
            <Text style={styles.price}>{item.price}лв</Text>
          </View>
        ) : (
          <Text style={styles.price}>{item.price}лв</Text>
        )}
      </View>
    );
  }

и функция loadMore =>

  loadMoreData() {
    const { fetching_from_server, isListEnd } = this.state;
    if (!fetching_from_server && !isListEnd) {
      this.setState({ fetching_from_server: true }, () => {
        this.props.productActions.fetchProducts(this.page);
      });
    }
  }

Answer 1

Похоже, у некоторых ваших товаров отсутствуют изображения. Попробуйте добавить чек, чтобы убедиться, что для каждого элемента есть изображение. Примерно так должно работать:

_renderItem(item) {
  return (
    <View style={styles.containerP}>
      {item.images && item.images.length ? (
        <Image
          style={styles.image}
          source={{uri: item.images[0].woocommerce_thumbnail}}
        />
      ) : null}

      <Text numberOfLines={1} style={styles.name}>
        {item.name}
      </Text>
      {item.regular_price !== '' &&
      item.price + '' !== item.regular_price + '' ? (
        <View style={styles.prices}>
          <Text style={styles.price_discounted}>{item.regular_price}лв</Text>
          <Text style={styles.price}>{item.price}лв</Text>
        </View>
      ) : (
        <Text style={styles.price}>{item.price}лв</Text>
      )}
    </View>
  );
}

Чтобы объяснить ошибку, вы видите немного дальше. Ожидается, что item.images будет массивом объектов, но если изображений нет, то item.images[0] будет неопределенным. Затем вы пытаетесь получить доступ к свойству объекта woocommerce_thumbnail, но item.images[0] не определено, поэтому вы получаете ошибку «undefined is not an object».

Answer 2

Ciao, похоже, что ваш item в _renderItem равен undefined (ошибка говорит: «undefined не является объектом»). Так что вы можете легко решить, выполнив что-то вроде:

_renderItem(item) {
    return (
      {item &&
      <View style={styles.containerP}>
        <Image style={styles.image} source={{ uri: item.images[0].woocommerce_thumbnail }} />
        <Text numberOfLines={1} style={styles.name}>
          {item.name}
        </Text>
        {item.regular_price !== '' && item.price + '' !== item.regular_price + '' ? (
          <View style={styles.prices}>
            <Text style={styles.price_discounted}>{item.regular_price}лв</Text>
            <Text style={styles.price}>{item.price}лв</Text>
          </View>
        ) : (
          <Text style={styles.price}>{item.price}лв</Text>
        )}
      </View>}
    );
  }