For..in только возвращает первый элемент - React js - PullRequest
Новая
       11

For..in только возвращает первый элемент - React js

0 голосов
/ 28 ноября 2018

Я перебираю объект для возврата значений.Код работает нормально, когда я консоль.log результат, но не работает, когда я пытаюсь представить его как текст.По какой-то причине он возвращает только первое значение.Что я делаю не так?

Вот код: 

  testFunc = () => {

let spaceship = {
    crew: {
    captain: {
        name: 'Lily',
        degree: 'Computer Engineering',
        cheerTeam() { console.log('You got this!') }
        },
    'chief officer': {
        name: 'Dan',
        degree: 'Aerospace Engineering',
        agree() { console.log('I agree, captain!') }
        },
    medic: {
        name: 'Clementine',
        degree: 'Physics',
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna',
        degree: 'Conservation Science',
        powerFuel() { console.log('The tank is full!') }
        }
    }
};

for(let crewMember in spaceship.crew){
   return spaceship.crew[crewMember].name
}

 }


render(){
  return(
    <div>
     {this.testFunc()}
    </div>
  )
}

Новый код, который не рендерит 

  testFunc = () => {

let spaceship = {
    crew: {
    captain: {
        name: 'Lily',
        degree: 'Computer Engineering',
        cheerTeam() { console.log('You got this!') }
        },
    'chief officer': {
        name: 'Dan',
        degree: 'Aerospace Engineering',
        agree() { console.log('I agree, captain!') }
        },
    medic: {
        name: 'Clementine',
        degree: 'Physics',
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna',
        degree: 'Conservation Science',
        powerFuel() { console.log('The tank is full!') }
        }
    }
};

return Object.entries(spaceship.crew).map(member =>  member.name)

}

рендер() {return ({this.testFunc ()})}

1 Ответ

0 голосов
/ 28 ноября 2018

Проблема в том, что на первой итерации цикла for функция возвращается и завершается.Возможное решение для этого: 

testFunc = () => {

   let spaceship = {
      crew: {
         captain: {
            name: 'Lily',
            degree: 'Computer Engineering',
            cheerTeam() { console.log('You got this!') }
         },
         'chief officer': {
            name: 'Dan',
            degree: 'Aerospace Engineering',
            agree() { console.log('I agree, captain!') }
         },
         medic: {
            name: 'Clementine',
            degree: 'Physics',
            announce() { console.log(`Jets on!`) } },
            translator: {
               name: 'Shauna',
               degree: 'Conservation Science',
               powerFuel() { console.log('The tank is full!') }
            }
         }
   };
   var names = []
   for(var key in spaceship.crew){
       names.push(spaceship.crew[key].name)
   }

   return names // Return an array with the names
}

А затем, при рендеринге, вы должны сделать: 

render(){
   return(
      <div>
         {this.testFunc().map(name => <p> name </p>)}
      </div>
   )
}
...