从列表中的 React Native 上的 XML 返回和呈现循环文本项

Question

我找到了一种在 ComponentDidMount 方法中从 XML 中提取项目并循环它们的方法。我还设法将它们传递到 Component 的“渲染”部分，并将它们作为一大串字符串返回。但是我需要将它们显示为一个列表，以便一行专用于一个项目。

这是我当前的演示： https://snack.expo.io/@leourushi/api-looping-00

这是我从中提取数据的原始 XML： https://www.wmata.com/rider_tools/metro_service_status/feeds/mis/rail.xml

我使用这个工具将 XML 解析为可读格式： https://www.npmjs.com/package/react-native-rss-parser

我正在尝试创建一个类似于此的列表视图： https://www.wmata.com/service/status/#lines-affected

我使用地图功能来提取旅行警报的短标题（黄线、蓝线等）和更详细的描述文本。我将它们存储到分别命名为 gimmeNames 和 gimmeDescriptions 的变量中。

现在我想在列表视图中并排显示它们。

我在顶部创建了空状态名称，如下所示。

    constructor(props) {
        super(props);
        this.state = {
            rss: [],
            gimmeNames: "",
            gimmeDescriptions: ""
        };
    }

在 componentDidMount 中，我定义了原始 URL，运行“获取”操作并创建了两个循环函数。我将结果定义为 gimmeNames 和 gimmeDescriptions。

    componentDidMount() {
var url = 'https://www.wmata.com/rider_tools/metro_service_status/feeds/mis/rail.xml';

    return fetch(url)
  .then((response) => response.text())
  .then((responseData) => rssParser.parse(responseData))
  .then((rss) => {
    const gimmeNames = rss.items.map(function(item, index) {
      return (item.title);
    });
    const gimmeDescriptions = rss.items.map(function(item, index) {
      return (item.description);
    });

this.setState({
  gimmeNames: gimmeNames,
  gimmeDescriptions: gimmeDescriptions,
  rss: rss
});

  });

}

这是我将它们并排渲染的尝试。但目前我有一大块所有循环标题名称和另一块所有描述项。

    render() {

  const { rss, gimmeNames, gimmeDescriptions } = this.state;

  return(

<View style={styles.bigContainer}>
<View style={styles.box}>

<Text> Title: Hard coded strings for now </Text>
<View style={styles.lineItem}>
<View style={styles.lineRow}>


<Text style={styles.leftColumn}>{gimmeNames}</Text>
<Text style={styles.rightColumn}>{gimmeDescriptions}</Text>

</View>
</View>
</View>
</View>

    )
}

我肯定做错了。但我不知道如何得到正确的答案。任何指针将不胜感激。

Answer 1

我认为这会奏效。它类似于以前对我有用的其他示例：

constructor(props) {
    super(props);
    this.state = {
        rss: []
    };
}

然后当你获取数据时：

componentDidMount() {
var url = 
'https://www.wmata.com/rider_tools/metro_service_status/feeds/mis/rail.xml';

return fetch(url)
.then((response) => response.text())
.then((responseData) => rssParser.parse(responseData))
.then((rss) => {
 console.log(rss)
 this.setState({
 rss: rss
 });

 });

 }

然后当你渲染它们时：

render() {


  const gimmeItems = this.state.rss.items.map((item) =>

   <View style={styles.lineItem}>
   <View style={styles.lineRow}>


     <Text style={styles.leftColumn}>{item.title}</Text>
     <Text style={styles.rightColumn}>{item.description}</Text>

  </View>
  </View>

);


return(

<View style={styles.bigContainer}>
<View style={styles.box}>

 <Text> Title: Hard coded strings for now </Text>
 {gimmeItems}
</View>
</View>

)
}