Как правильно выполнить условный рендеринг в моем компоненте FlatList RenderItem? - PullRequest
Новая
       37

Как правильно выполнить условный рендеринг в моем компоненте FlatList RenderItem?

0 голосов
/ 08 марта 2020

Я создал функцию для получения фотографии с сервера, который получает в качестве входного сигнала связанный идентификационный номер. Функция возвратит код ответа, например 200, если с элементом связана фотография. Иначе, если код ответа 400 или 404, он должен вернуть ноль. Но когда я вызываю функцию внутри элемента JSX компонента RenderItem моего FlatList, проверка if, чтобы увидеть, не является ли возвращаемое значение не нулевым, - это своего рода работа. Он будет отображать компонент для всего элемента списка вместо того, который на самом деле имеет фотографию. Вот часть кода renderitem для моего компонента FlatList, который вызывает функцию: 

{this.myGetPhotoFunction(item.IDVALUE) !== null ? (
                      <View style={mystyle}>
                        <Image
                          style={mystyle}
                          source={{
                            uri: `http://MYSERVERURL/chits/${item.IDVALUE}/photo`
                          }}
                        />
                      </View>
                    ) : (
                      <Text>NO IMAGE</Text>
                    )}

Ниже моя функция для получения фотографии с сервера: 

myGetPhotoFunction = async IDVALUE => {
    try {
      const response = await fetch(
        `http://MYSERVERURL/chits/${IDVALUE}/photo`,
        {
          method: 'GET'
        }
      );

      if (response.status === 200) {
        return response.status;
      } else if (response.status === 400 || response.status === 404) {
        console.log('\n' + response.status + '\n');
        return null;
      }
    } catch (error) {
      console.log('\nError fetching photo: ' + error);
    }
  };

Прямо сейчас, проверка if внутри компонента RenderItem моего Flatlist отображает компонент для всего элемента списка. Что я не хочу . Я хочу, чтобы список отображал компонент только для того, который имеет возвращаемое значение обещания 200.

Вот то, что рендерит мое приложение: enter image description here

Как видите, список отображает компонент Image для всех элементов списка из-за пробелов внутри каждого элемента списка. Я хочу, чтобы элемент отображал изображение только при наличии фактического изображения.

1 Ответ

0 голосов
/ 08 марта 2020

Я нашел обходной путь. Мне пришлось создать новое состояние массива и l oop через мой другой массив и добавить туда данные изображения. Затем я просто отображаю новый массив в моем FlatList.

...