javascript - For..in 只返回第一项 - React js

Question

我正在循环一个对象以返回值。当我 console.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)

}

渲染(){ 返回( {this.testFunc()} ) }

Answer 1

问题是，在 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>
   )
}