我创建了一个从服务器接收照片的功能,该服务器接收相关的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的组件呈现组件。
如您所见,由于每个列表项内都有空白,因此该列表正在为所有列表项渲染Image组件。我希望该项目仅在有实际图像要显示的情况下显示图像。
答案 0 :(得分:0)
我找到了一种解决方法。我必须创建一个新的数组状态并遍历其他数组,然后在其中附加图像数据。然后,我只是在FlatList中渲染新数组。