Блог

Главная - Вопросы по программированию - React Native FlatList renderItem ничего не возвращает, несмотря на получение правильных данных

React Native FlatList renderItem ничего не возвращает, несмотря на получение правильных данных

#react-native #react-native-flatlist

#react-native #react-native-flatlist

Вопрос:

Вот renderItem функция:

   const renderItem = ({item, index}) => {
    getPost(item.id)
      .then((postContent) => {
        if (postContent.postType === 0) {
          console.log(postContent);
          console.log('Rendering type text post');
          return <TextPost item={postContent} index={index} />;
        } else if (postContent.postType === 1) {
          console.log(postContent);
          console.log('Rendering type image post');
          return <ImagePost item={postContent} index={index} />;
        } else {
          console.log(postContent);
          console.log('Rendering type link post');
          return <LinkPost item={postContent} index={index} />;
        }
      })
      .catch((err) => console.log(err));
  };

renderItem работает с массивом идентификаторов записей, которые существуют в моей базе данных. Для каждого идентификатора FlatList должен вызывать мой getPost метод с item.id параметром в качестве параметра, а затем извлекать данные post из моей базы данных с соответствующим идентификатором post. Это работает, поскольку мои console.log операторы распечатывают правильные данные для заданного массива идентификаторов сообщений. Однако операторы return не возвращают никаких компонентов, а FlatList рендеринг пустой.
Вот плоский список на случай, если это поможет:

 <FlatList data={data} renderItem={renderItem} style={styles.list} />

Комментарии:

1. Я думаю, это потому, что асинхронный код. Используйте переменные состояния для хранения postContent

2. Почему бы не сохранить извлеченные данные внутри state , а затем использовать их внутри renderItem ?

3. @LeriGogsadze пытается сделать это сейчас, но он выполняет бесконечный рендеринг. Я пытаюсь отладить его прямо сейчас.

4. @usafder пытается сделать это сейчас, но он выполняет бесконечный рендеринг. Я пытаюсь отладить его прямо сейчас.

Ответ №1:

В Render вы не можете использовать асинхронную функцию, потому что render не может дождаться выполнения вашей функции. Скорее сделайте это в componentDidMount, создайте свой массив, поместите его в состояние и используйте состояние в flatlist.