Question

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

这是我当前的演示： http://www.jrsoftware.org/isinfo.php

这是我要从中提取数据的原始XML： https://snack.expo.io/@leourushi/api-looping-00

然后我使用此工具将XML解析为可读格式： https://www.wmata.com/rider_tools/metro_service_status/feeds/mis/rail.xml

我正在尝试创建类似于此视图的列表视图： https://www.npmjs.com/package/react-native-rss-parser

我使用了地图功能来提取旅行警报的简短标题（黄线，蓝线等）和更详细的描述文本。我将它们存储到分别名为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>

)
}

在列表中从React Native上的XML返回并渲染循环的文本项

1 个答案: