Перебирать ключ / значение и отображать его

#javascript #react-native

#javascript #реагировать — родной

Вопрос:

Я пытаюсь отобразить ключ-значение в представлении (ScrollView), но не добился успеха в приведенном ниже коде:

 render(){
  const MyResult = this.state.data.map((myData) => {
    Object.keys(myData).map((key) => {
      console.log(key   " - "   myData[key]);    
      return( 
        <View>
          <Text>{key} - {myData[key]}</Text>
        </View>
      )
    });
  })


  return(
   <View style={styles.container}>
     <ScrollView>
       {MyResult}
     </ScrollView>
   </View>
  )}
}

Моя консоль.журнал отображает все нормально, и я предполагаю, что ошибка начинается с Object.keys… Дисплей на симуляторе, очевидно, ничего не показывает.

Как я могу перебирать ключи, значения и отображать их?

1. Вы ничего не возвращаете из внешнего .map(...) обратного вызова, т.Е. MyResult Это массив, который содержит только undefined значения as. Я думаю, что вам действительно нужна / нужна flatMap .

2. Я никогда не использовал flatMap. Каков наилучший способ сделать это?

3. Пользовательская реализация состоит из 3-5 строк кода или использует уже существующую реализацию, такую как npmjs.com/package/lodash.flatmap . Конечно, вы также можете просто сгладить MyResult (при условии, что вы возвращаете результат из внешнего .map обратного вызова).

Ответ №1:

Как упоминал Феликс в комментариях, вы ничего не «возвращаете» с внешней карты. Просто попробуйте добавить return before Object.keys и посмотреть, работает ли это, например:

  const MyResult = this.state.data.map((myData) => {
   return Object.keys(myData).map((key) => {
      console.log(key   " - "   myData[key]);    
      return( 
        <View>
          <Text>{key} - {myData[key]}</Text>
        </View>
      )
    });
  })