React Native Webscraping Attempt: undefined is not a function (near '...this.state.items.map...')

Question

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

我一直在关注this 教程以使一些网络抓取工作。最终目标是不是像教程那样的亚马逊列表，但它应该可以完成工作。我正在使用cheerio-without-node-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',
    },
  });

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

在您的回答中，您能否解释一下出了什么问题、原因，并在可能的情况下提供资源以了解更多信息？

谢谢！

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>
    );
  }