react-native：コンポーネントが.mapでレンダリングされない

Question

何かがここにはありません。多くの例でこの作品を見てきましたが、returnを使わずにAnimated.Viewをレンダリングしません。どんなことが起こっているのでしょうか？

Answer 1

直接参照MDN docs

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

または

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

Answer 2

マップ内の匿名関数内のコンポーネントを返します。

のTh e map（）メソッドは、この配列のすべての要素に提供された関数を呼び出した結果で新しい配列を作成します。

提供された関数がデータを返さない場合は、配列に未定義のオブジェクトが含まれます。

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

Answer 3

Bikasバイバブは彼のコメントにしてMozilla Docsを言い換え言ったように：マップは順番に、配列の各要素に対して一度に提供するコールバック関数を呼び出し、その結果から新しい配列を作成します。あなたは何も返さない場合は

したがって、あなただけの代わりに返された値の未定義で配列をあなたのballArrayと同じ長さを持つことになります。ブラウザのコンソールで次の2つの例を試してみてください。リターンなし

> 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] 

は、この情報がお役に立てば幸い！

Answer 4

私はいくつかの回答が既にあることを知っていますが、なぜのOP特有の問題に対処できないと思います。

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] 

を、あなたはそれを返さずにブロック本体の内部コンポーネントを指定すると、マップのプロトタイプを使用すると、内部のアイテムを返すことが必要ですので、新しいマップで使用されるコールバック、マップは空です。

Answer 5

ES6の矢印の機能を使用すると、このように暗黙のリターンを行うことができます。

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