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

【问题标题】：How do I access this rss variable inside my fetch method in React Native?如何在 React Native 的 fetch 方法中访问这个 rss 变量？
【发布时间】：2019-11-27 12:41:32
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： react-native rss fetch expo rss-reader

【解决方案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]

友好。

【讨论】：

我还有一个问题，如何将其解析为我的HomeScreenPics = [{ title: feed.title }]？
当我尝试将它解析到我的 HomeScreenPics 数组时，它显示 Cant find variable: feed
@DarkLord666 当您要渲染的图像基于获取响应时，您应该将整个数组 HomeScreenPics 放入反应状态。不要忘记，每次更新状态时，渲染函数都会重新执行。
找不到变量：feed

【解决方案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。

最好的问候，

【讨论】：