通过带有对象子级的数组进行 React 本机映射 - 工作方式与在 react web 中不同

React native mapping through array with object childs - working different as in react web?

本文关键字：方式 工作 映射 react web 本机 React 对象 数组      更新时间：2023-09-26

我有这个数组，其中包含对象：

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） 包装对象。

我

不确定我是否完全错过了一些东西，或者 react native 根本不支持像我的例子那样通过数组进行映射。

这应该有效：

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>
  )
}

尝试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索引。

相关文章：