如何在FlatList RenderItem组件中正确执行条件渲染?

时间:2020-03-08 12:32:48

标签: javascript android reactjs rest react-native

我创建了一个从服务器接收照片的功能,该服务器接收相关的ID号作为输入,如果有与该物品相关的照片,该函数将返回响应代码,例如200。否则,如果响应代码为400或404,则应返回null。但是,当我在FlatList的RenderItem组件的JSX元素内调用该函数时,if检查以查看返回的值是否不为null-可以正常工作。它将显示所有列表项的组件,而不是实际具有照片的组件。这是我的FlatList组件的renderitem代码的一部分,它调用了该函数:

{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);
    }
  };

现在,我的Flatlist的RenderItem组件内部的if检查正在为所有列表项呈现该组件。 我不想要。我希望列表仅为返回的承诺值200的组件呈现组件。

这是我的应用正在渲染的内容: enter image description here

如您所见,由于每个列表项内都有空白,因此该列表正在为所有列表项渲染Image组件。我希望该项目仅在有实际图像要显示的情况下显示图像。

1 个答案:

答案 0 :(得分:0)

我找到了一种解决方法。我必须创建一个新的数组状态并遍历其他数组,然后在其中附加图像数据。然后,我只是在FlatList中渲染新数组。