Реагируйте на собственную попытку создания веб-страниц: undefined не является функцией (рядом с '... this.state.items.map ...') - PullRequest
Новая
       33

Реагируйте на собственную попытку создания веб-страниц: undefined не является функцией (рядом с '... this.state.items.map ...')

0 голосов
/ 11 января 2020

Я новичок, чтобы отреагировать на нативный (Использование Expo; я пытаюсь изучить его для проекта, который я буду делать с кем-то еще), и я боролся с этим в течение нескольких часов. Я искал решения этой ошибки, но я не мог понять это.

Я следовал этому руководству, чтобы заставить некоторые работы работать. Конечная цель - , а не список амазонок, как в учебном пособии, но он должен выполнить свою работу. Я использую cheerio-без узла-натива в качестве библиотеки webscraping.

Я получаю ошибку 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' в разные места, и, хотя это вполне может быть проблемой, эти решения не помогли мне.

В своем ответе не могли бы вы объяснить, что было не так, почему и, если возможно, дать ресурсы, чтобы узнать больше?

Спасибо!

1 Ответ

0 голосов
/ 11 января 2020

на самом деле вы пытаетесь использовать состояние, подобное компоненту класса, в функциональном компоненте. Так что, если бы я там, где ты, я бы сделал что-то вроде: 

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