时间戳

首页 > 解决方案 > 使用 YouTube Data v3 API 调用反应原生 JSON 问题

react-native - 使用 YouTube Data v3 API 调用反应原生 JSON 问题

问题描述

我有一个来自 YouTube 的请求，以创建我想在平面列表中显示的视频列表。我在整个应用程序中使用相同的方法（调用 WordPress 等），但是当我尝试使用 YouTube API 实现相同的方法时（我已经设置了密钥等），它会引发错误；

在此处输入图像描述

const Watch = ({typeOfProfile}) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
let x = {foo: 11, bar: 42};

function playertype(val) {
   return 'https://www.googleapis.com/youtube/v3/searchpart=snippet&channelId=UCa_6KiOjxm6dEC_mMRP5lGA&maxResults=20&order=date&type=video&key=xxxxx';
}

useEffect(() => {
fetch(playertype(typeOfProfile))
  .then((response) => response.json())
  .then((json) => {
    x = setData(json)
    })
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));
}, []);


const result = Object.keys(x).map(key => ({[key]: x[key]}));


return (
<View style={styles.body}>
 <View style={styles.topscroll}>
 {isLoading ? <ActivityIndicator/> : (
    <FlatList
      data={result}
      horizontal={true}
      keyExtractor={({ id }, index) => id}
      renderItem={({ item }) => (
      <View>
          <Text>
          {x.val}
          </Text>
      </View>
      )}
    />
  )}
</View>
</View>
);
};

有人提到它可能是返回的对象而不是数组，似乎奇怪的是 json 结构与我使用这种方法的其他请求相同。

标签： react-native

解决方案

我发现我必须在 FlatList 的 data 属性上添加括号。所以而不是

data={data}

我也不得不改变它；

data={[data]}

立即编码；

<FlatList
        data={[data]}
        horizontal={true}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item, index }) => (
          <View style={styles.container}>
           <Image style={styles.imgyoutubeprev} source={{ uri: chkValue(item.items[0].snippet.thumbnails.high.url) }} />
          </View>
        )}
      />

推荐阅读