通过带有对象子项的数组来反应本机映射-与反应网络中的工作方式不同吗? [英] React native mapping through array with object childs - working different as in react web?

问题描述

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

I have this array which contains objects:

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

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

Now in the web react environment I was able to map through this array and return its values to a variable which can then be rendered.

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

So I used the same approach:

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

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

After the mapping has finished it should be rendered as following:

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

不幸的是，我在 iOS 模拟器中收到一条警告，内容为:

Unfortunately I receive a warning in my iOS Simulator which says:

对象作为 React 子对象无效(找到:带有键 {WholeNews} 的对象).如果您打算渲染一组子项，请改用数组或使用 React 插件中的 createFrament(object) 包装对象.

Objects are not valid as a React child(found: object with keys {WholeNews}). If you meant to render a collection of children, use an array instead or wrap the object using createFrament(object) from the React-addons.

我不确定我是否完全遗漏了某些东西，或者在我的示例中，原生反应根本不支持通过数组进行映射.

I am not sure whether I am missing out something completely or react native simply doesn't support a mapping through an array as in my example.

推荐答案

这应该有效:

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

这篇关于通过带有对象子项的数组来反应本机映射-与反应网络中的工作方式不同吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！