我如何在 React Native 的 fetch 方法中访问这个 rss 变量？

Question

我正在尝试使用 react-native-rss-parser (https://www.npmjs.com/package/react-native-rss-parser) 解析我的 RSS 提要并将其显示在卡片上，但我不知道如何访问 rss 变量.

fetchRSSFeed() {
    return fetch('http://www.nasa.gov/rss/dyn/breaking_news.rss')
    .then((response) => response.text())
    .then((responseData) => rssParser.parse(responseData))
    .then((rss) =>  { console.log(rss.title) })
  }

render() {
      {this.fetchRSSFeed()}
      return (
        <SafeAreaView style={styles.container}>
          <Swiper
            cards={HomeScreenPics}
            renderCard={Card}
            infinite 
            backgroundColor="white"
            cardHorizontalMargin={0}
            stackSize={2} 
          />
        </SafeAreaView>
      )
    }
  }

  HomeScreenPics = [{
    pic: require('../assets/images/news.jpg'), 
    title: rss.title
  }]

console.log(rss.title) 工作正常。它注销了 RSS 提要标题，但我试图在 fetch 方法之外访问 rss 变量，我想将它解析到我的 HomeScreenPics 数组中，但它一直显示错误：不能找到变量 rss

Answer 1

如果您想访问 rss 变量并将其传递给渲染函数，您所要做的就是使用 React 为您提供的状态。

示例：

state = {
   feed: {}
}

fetchRSSFeed() {
    return fetch('http://www.nasa.gov/rss/dyn/breaking_news.rss')
    .then((response) => response.text())
    .then((responseData) => rssParser.parse(responseData))
    .then((rss) =>  { 
        this.setState(prevState => ({
            ...prevState,
            feed: rss
        }));
    })
  }

render() {
      {this.fetchRSSFeed()}
      return (
        <SafeAreaView style={styles.container}>
          <Swiper
            cards={HomeScreenPics}
            renderCard={Card}
            infinite 
            backgroundColor="white"
            cardHorizontalMargin={0}
            stackSize={2} 
          />
        <Text>{this.state.feed.title}</Text>
        </SafeAreaView>
      )
    }
  }

您可以在任何函数中使用变量this.state.feed访问响应对象。

推荐你从官方文档入手：[https://facebook.github.io/react-native/docs/state]

友好。

Answer 2

我实际上面临着与您相同的问题。 xarhsasi 的回答很有魅力。请记住，您可以避免每次都调用该函数，因为您愿意只在开始时渲染一次。我强烈建议你将它添加到 componentDidMount() 中，就像这样

  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      feed: {}
    }
  }


  componentDidMount() {
    return fetch('http://www.nasa.gov/rss/dyn/breaking_news.rss')
    .then((response) => response.text())
    .then((responseData) => rssParser.parse(responseData))
    .then((rss) => {
        this.setState({
          isLoading: false,
          feed: rss
        });
        
      });
  }

然后，你只需要调用xarhsasi告诉你的状态，例如this.state.feed.title。

此致，

我如何在 React Native 的 fetch 方法中访问这个 rss 变量？

How do I access this rss variable inside my fetch method in React Native?

rss

fetch

rss-reader

react-native

expo