ReactNative -从promise获取数据
ReactNative -从promise获取数据
提问于 2021-06-23 01:08:15
我能够获取JSON数据，现在它返回一个数组。如何在react native中使用数组中的元素？下面是我的尝试：
export default function display() {
const fetching = async() => ... //defines fetching() which returns the array
...
return (
<View>
<Image
source = {{uri: 'http://imageURI.' + fetching().then((arr) => {return arr[0]}) + '.png'}}
style = {{height: 50, width: 50, borderRadius: 50}} />
</View>
)
}如何访问数组中的元素？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-23 01:23:15
尝试以下操作。
您需要异步调用API，在获得响应之前显示一些内容，然后使用检索到的数据更新状态。
import React, {useState, useEffect} from 'react';
import {View, Image} from 'react-native'
const fetch = async () => {/* ASYNC LOGIC HERE*/};
const MyComponent = () => {
const [uri, setUri] = useState(null);
useEffect(() => {
fetch().then((arr) => {
setUri(`http://imageURI.${arr[0]}.png`);
});
}, []);
return (
<View>
{
uri ? <Image source={{uri}} style={{height: 50, width: 50, borderRadius: 50}} /> : null
}
</View>
);
};Stack Overflow用户
发布于 2021-06-23 01:51:04
我同意ernesto的观点，我只需要在抓取函数中完成所有的逻辑，对于我来说，如果你得到一个数组，它是由几个元素组成的，所以我会用map方法来准备
import React, { useState, useEffect } from "react";
import { View, Image } from "react-native";
const Display = () => {
const [state, setState] = useState(null);
const fetching = async () => {
try {
const response = await fetch("api.exemple");
const imagesArray = await response.json();
setState(imagesArray);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
fetching();
}, []);
return (
<View>
{state &&
state.map((fileName) => {
const uri = `http://imageURI.${fileName}.png`;
return (
<Image
source={{ uri }}
style={{ height: 50, width: 50, borderRadius: 50 }}
/>
);
})}
</View>
);
};
export default Display;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68087980
复制相关文章
相似问题
腾讯云开发者
