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

我创建了一个函数来从服务器获取一张照片，该服务器接收一个关联的ID号作为输入，如果有一张照片与该项目关联，该函数将返回类似于200的响应代码。否则，如果响应代码为400或404，则应返回null。但是，当我在平面列表的RenderItem组件的JSX元素中调用函数时，检查返回值是否为null的if检查是可行的。它将显示所有列表项的组件，而不是实际有照片的组件。下面是调用函数的我的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>
                    )}

现在，我的平面列表的RenderItem组件中的if检查正在为所有列表项呈现该组件这是我不想要的。我希望列表仅为返回的承诺值为200的组件呈现组件

以下是我的应用程序正在呈现的内容：

---

如您所见，由于每个列表项中都有空格，因此列表正在呈现所有列表项的图像组件。我希望项目仅在有实际图像要显示时才显示图像。

我找到了解决方法。我必须创建一个新的数组状态，循环另一个数组并将图像数据附加到其中。然后我只是在平面列表中渲染新数组

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