Реагировать на внутреннее сопоставление массива с дочерними объектами - работающими по-разному, как в интерактивной сети?

У меня есть этот массив, который содержит объекты:

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

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

Итак, я использовал тот же подход:

    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 Simulator, в котором говорится:

Объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {WholeNews}). Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект, используя createFrament (объект) из React-addons.

Я не уверен, что я упускаю что-то полностью или реагирую на родной, просто не поддерживает сопоставление через массив, как в моем примере.

Любые советы или решения?:/

Ответ 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>
  )
}

Ответ 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.