React Native:Base64图像数组字符串未在FlatList中渲染

Question

我需要在我的RN应用程序中渲染一个带有图像项目的平面列表，但看起来我错过了一些东西。我从API获取blob数据，并使用Buffer将其解析为字符串，然后将其推送到我的Array。我用数组来渲染FlatList

export function HomeScreen() {
const imagesList: any = [];
useEffect(() => {
loadData();
}, []);
const loadData = async () =>{
await callAPI().then(res => {
//blob base64 is from type jpeg
imagesList.push({imageURI: "data:image/jpeg;base64,"+Buffer.from(res.image1).toString('ascii')})
})
}
return (
<View style={[styles.imageSlider, {width, height}]}>
<FlatList
data={imagesList}
renderItem={({item, index}) => (
<>
{console.log('item: ', item)}
<Image
key={index}
source={{uri: item.imageURI}}
style={{
height,
width,
resizeMode: 'cover',
maxHeight: 500,
maxWidth: 500,
}}
/>
</>
)}
/>
</View>
)
}

我检查了从api收到的数据，一切都很好，但它没有呈现

有人能告诉我我的问题吗？我不是注册护士方面的专家谢谢

Answer 1

我能看到的两个问题。。。

1. 您没有使用任何状态
2. 您正在将缓冲区编码为需要Base64的ASCII

// Define state using the useState hook
const [ imagesList, setImagesList ] = useState<Array<{ imageURI: string }>>([]);
const loadData = async () => {
const { image1 } = await callAPI()
// you want an array for some reason ¯_(ツ)_/¯
return [{
imageURI: `data:image/jpeg;base64,${Buffer.from(image1).toString("base64")}`
}]
}
useEffect(() => {
loadData.then(setImagesList)
}, [])