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

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

这是我当前的演示：

这是我从中提取数据的原始XML：

我使用这个工具将XML解析为可读的格式：

我正在尝试创建与此类似的列表视图：

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

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

我在顶部创建了空的州名称，如下所示

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

在componentDidMount中，我定义了原始URL，运行了“fetch”操作并创建了两个循环函数。我将结果定义为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>

    )
}

render（）{
const{rss，gimmeNames，gimmeDescriptions}=this.state；
返回(
标题：目前的硬编码字符串
{gimmeNames}
{gimmeDescriptions}
)
}

---

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

我认为这将起作用。这与我以前使用过的其他示例类似：

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>

)
}

render（）{
const gimmeItems=this.state.rss.items.map（（item）=>
{item.title}
{item.description}
);
返回(
标题：目前的硬编码字符串
{gimmeItems}
)
}

谢谢！我们需要在箭头的末端用一个大括号{}吗？无论如何我试过这个。它返回了一个新的错误。它说“undefined不是一个对象（计算'this.state.rss.items.map'）.我会继续挖掘…嗯。我不确定为什么会这样。我只是根据对您使用的数据的仔细阅读，对我的答案进行了一点编辑，但我不确定这是否会修复“undefined is not a object”（未定义不是对象）。如果任何项缺少标题或描述，这可能会导致错误。您可能需要输入一些内容来检查这一点。