反应原生网络抓取尝试：未定义不是一个函数(靠近'...this.state.items.map...')

Question

我是本地反应的新手(使用博览会;我正在尝试为我将与其他人一起做的项目学习它(，我已经为此苦苦挣扎了几个小时。我已经搜索了此错误的解决方案，但我无法弄清楚。

我一直在按照本教程进行一些网络抓取工作。最终目标不是像教程那样的亚马逊列表，但它应该完成工作。我正在使用没有节点原生的 cheerio-native 作为网络抓取库。

我在尝试运行该应用程序时收到错误undefined is not a function (near '...this.state.items.map...')。这是我正在处理的文件：

import { TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
import { ExpoLinksView } from '@expo/samples';
import cio from 'cheerio-without-node-native';

async function loadGraphicCards(page = 1) {
const searchUrl = `https://www.amazon.de/s/?page=${page}&keywords=graphic+card`;
const response = await fetch(searchUrl);  // fetch page 
const htmlString = await response.text(); // get response text
const $ = cio.load(htmlString);       // parse HTML string
return $("#s-results-list-atf > li")             // select result <li>s
.map((_, li) => ({                      // map to an list of objects
asin: $(li).data("asin"),    
title: $("h2", li).text(),    
price: $("span.a-color-price", li).text(),
rating: $("span.a-icon-alt", li).text(),
imageUrl: $("img.s-access-image").attr("src")
}));
}
export default function LinksScreen() {
state = { 
page: 1,
items: [], 
};
state.items = loadGraphicCards(state.page);
return (
// <ScrollView style={styles.container}>
<ScrollView>
{this.state.items.map(item => <Item {...item} key={item.asin}/>)}
</ScrollView>
);
}
LinksScreen.navigationOptions = {
title: 'Readings',
};
const Item = props => (
<TouchableOpacity onPress={() => alert("ASIN:" + props.asin)}>
<Text>{props.title}</Text>
<Image source={{uri: props.imageUrl}}/>
<Text>{props.price}</Text>
<Text>{props.rating}</Text>
</TouchableOpacity>
)
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#ffffff',
},
});

我已经尝试过将"这个"放在不同的地方，虽然这很可能是问题所在，但这些解决方案对我不起作用。

在您的回答中，您能否解释出什么问题，为什么，如果可能的话，提供资源以了解更多信息？

谢谢！

Answer 1

实际上您正在尝试在功能组件中使用类似类的状态组件。所以如果我在你那里，我会做这样的事情：

import React, { useState } from 'react';
//.....
export default function LinksScreen() {
const [items, setItems] = useState([]);
setItems(YOUR_ITEMS_FROM_SOMEWHERE));
return (
// <ScrollView style={styles.container}>
<ScrollView>
{items && items.map(item => <Item {...item} key={item.asin}/>)}
</ScrollView>
);
}