Что-то здесь не так. он не рендерит Animated.View без использования return, хотя я видел эту работу во многих примерах. Есть догадки, почему это поведение?

enter image description here

1
Elton Jain 8 Дек 2016 в 15:24

5 ответов

Лучший ответ

Прямой возврат компонента в анонимной функции внутри карты

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

Или

.map((d, i) => <Component />)
1
Elton Jain 8 Дек 2016 в 12:39

Как сказал Бикас Вайбхав в своем комментарии и перефразируя Mozilla Документы: 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]

Надеюсь это поможет!

0
edlee 8 Дек 2016 в 13:05

Я знаю, что уже было несколько ответов, но я считаю, что они не смогли ответить на конкретный вопрос OP о том, почему почему это не работает, особенно с учетом нового синтаксиса ES6.

tl; dr: функции стрелок ES6 с черными телами не возвращаются неявным образом.

Из документов:

Функции стрелок могут иметь либо «краткое тело», либо обычное «тело блока».

В кратком теле требуется только выражение, и неявный возврат прилагается. В теле блока вы должны использовать явный оператор возврата.

Это пример "краткого тела", использующего прототип 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
Brad Bumbalough 8 Дек 2016 в 14:24

С помощью функций стрелок ES6 вы можете делать неявные возвраты, как это:

this.state.ballArray.map((d, i) => (
  <Animated.View />
))
0
Matt Aft 8 Дек 2016 в 16:09

См. документы:

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве.

Если предоставленная функция не возвращает никаких данных ... у вас будет массив с неопределенными объектами.

[1, 2, 3].map(function(){}) // [undefined, undefined, undefined]
0
atlanteh 8 Дек 2016 в 13:04