通过数组与对象子进行本机映射 - 在反应网络中工作方式不同?

时间:2016-02-09 07:25:47

标签: javascript reactjs react-native

我有这个包含对象的数组:

var tmp_array = [
 { headline: "Test", text: "Test text", send_at: "test date" }
];

现在在web反应环境中,我能够映射这个数组并将其值返回到一个变量,然后可以渲染它。

所以我使用了相同的方法:

    var i = -1;
    var WholeNews = tmp_array.map(function(news){
      i++;
      return(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

映射完成后,应该呈现如下:

return(
  <View>
     {WholeNews}
  </View>
);

不幸的是,我在iOS模拟器中收到一条警告:

  

对象无效作为React子对象(找到:具有键{WholeNews}的对象)。如果您要渲染子集合,请使用数组,或者使用React-addons中的createFrament(object)包装对象。

我不确定我是否完全错过了某些内容或者反应原生只是不支持通过数组进行映射,如我的示例所示。

2 个答案:

答案 0 :(得分:33)

这应该有效:

WholeNews() {
  return tmp_array.map(function(news, i){
    return(
      <View key={i}>
        <Text>{news.headline}</Text>
        <View>
          <Text>{news.text}</Text>
        </View>
      </View>
    );
  });
}

render() {
  return(
    <View>
      {this.WholeNews()}
    </View>
  )
}

答案 1 :(得分:2)

尝试使用forEach方法代替map

   var WholeNews =[];
   tmp_array.forEach(function(news, i){
      WholeNews.push(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

并注意从哪里可以获得i索引..