react-native：组件不在.map中呈现答案

【问题标题】：react-native: Component doesn't render in .mapreact-native：组件不在.map中呈现
【发布时间】：2017-04-23 16:42:41
【问题描述】：

这里似乎有些不对劲。它不会在不使用return 的情况下呈现Animated.View，而我在许多示例中都看到了这项工作。任何猜测为什么会出现这种行为？

【问题讨论】：

map 只是一个函数。如果它没有返回任何东西，那么你就没有任何价值可以操作。这是地图的一般行为
查看箭头函数中的大括号。 foo => bar 或 foo => ( bar )：隐式返回，foo => { bar } 需要显式返回。
@Bikas 谢谢你。我无法告诉您在 map() 显示中缺少视图多久。你的简短陈述让我眼前一亮，但现在一切正常。

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

使用 ES6 箭头函数，您可以像这样进行隐式返回：

this.state.ballArray.map((d, i) => (
  <Animated.View />
))

【讨论】：

【解决方案2】：

我知道已经有几个答案，但我相信他们未能解决 OP 特定的问题，即 为什么 它不起作用，尤其是考虑到新的 ES6 语法。

tl;dr：带有块体的 ES6 箭头函数不会隐式返回。

From the docs:

箭头函数可以有“简洁体”或通常的“块体”。

在简洁的正文中，只需要一个表达式，并附加一个隐式返回。在块体中，必须使用显式的 return 语句。

这是一个“简洁正文”的例子，使用filter原型：

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredArray = myArray.filter(item => item > 5);
console.log(filteredArray);
// => [6, 7, 8, 9, 10]

在这个表达式中，缺少括号{}意味着它会隐式返回表达式的结果。

“块体”等价物是：

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredArray = myArray.filter(item => {
  return item > 5;
});
console.log(filteredArray);
// => [6, 7, 8, 9, 10]

在您的帖子中，您在块体内指定组件而不返回它，并且由于地图原型要求您在回调中返回将用于新地图的项目，因此地图是空的。

【讨论】：

【解决方案3】：

正如 Bikas Vaibhav 在他的评论和解释 Mozilla Docs 中所说：map 按顺序为数组中的每个元素调用一次提供的回调函数，并根据结果构造一个新数组。

因此，如果您不返回任何内容，您将拥有一个与您的 ballArray 长度相同的数组，只有未定义而不是返回值。在浏览器控制台中尝试这两个示例。

返回：

> b = [1,4,9];
> d = b.map(function(a){
    var rt = a*2;
    return rt
});
<- [2, 8, 18]

没有回报：

// Without a return:
> d = b.map(function(a){
    var rt = a*2;
});
<- [undefined, undefined, undefined]

希望这会有所帮助！

【讨论】：

【解决方案4】：

见 MDN docs:

map() 方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。

如果提供的函数没有返回任何数据..您将有一个包含未定义对象的数组。

[1, 2, 3].map(function(){}) // [undefined, undefined, undefined]

【讨论】：

【解决方案5】：

在map里面的匿名函数中直接返回Component

.map((d, i) => (<Component />))

或

.map((d, i) => <Component />)

【讨论】：