通过具有对象子对象的数组反应本机映射 - 与反应网络中的工作方式不同？答案

【问题标题】：React native mapping through array with object childs - working different as in react web?通过具有对象子对象的数组反应本机映射 - 与反应网络中的工作方式不同？
【发布时间】：2023-03-07 03:27:01
【问题描述】：

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

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

现在在 web react 环境中，我能够映射这个数组并将它的值返回给一个可以渲染的变量。

所以我用了同样的方法：

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

我不确定我是否完全遗漏了某些东西，或者本机反应根本不支持通过数组进行映射，如我的示例所示。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

这应该可行：

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

【讨论】：

如何在WholeNews() 的第二个return 函数中访问状态？
@kojow7 你需要解释的部分是什么？
解释 OP 出了什么问题以及您的 OP 发生了什么变化将有助于理解错误消息的含义。简单地说“这应该可行”并不能提供任何解释。

【解决方案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 索引..

【讨论】：

如果你这样做，你必须返回 WholeNews 作为渲染方法