如何在react中循环、返回和呈现对象

Question

我有一个对象，看起来像这样：

{
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "sdandersonz97@gmail.com",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "sdandersonz97@gmail.com",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

我用以下形式初始化我的状态：

this.state={
      startups:[]

这里我调用firebase来设置我的状态：

 componentDidMount(){
    const rootRef = firebase.database().ref().child('startups')
    rootRef.once('value', snap =>{
      this.setState({

        startups: this.state.startups.push(snap.val())

      });
    }

)；

}我尝试过不同的循环方式: 1.

formatStartUps(){
   const startups = [this.state.startups];
   startups.forEach((element)=>{console.log(element)} )
 }

2.

formatStartUps(){
       const startups = [this.state.startups];
       startups.map((startup,index)=>{<p key={index}>{startup}</p>))
     }

3.

formatStartUps(){
           const startups = [this.state.startups];
           for(let startup of startups){
            console.log(startup)
            }
         }

然后我调用基于fire的数据库来设置我的状态和工作，但是我不能循环到每次启动来在我的div中呈现这些值。

如何循环此对象并在render()方法中呈现每个值？我很感谢你的帮助

Answer 1

如果startups一个对象

Object.keys(startups).map((startup) => {
  return (
    <div>{startups[startup].proyect_name}</div> //for example
  )
})

Answer 2

使用：Object.keys(objectName)循环对象

​

var data = {
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "sdandersonz97@gmail.com",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "sdandersonz97@gmail.com",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

Object.keys(data.startups).map(function(property){
   console.log(data.startups[property].achievements);
  
})

​

Answer 3

你可以做这样的事情

render{
    return(
       <div>
        {
    this.state.startups.map(function(startups,i)
      {

    <li key={i}>{startups.achievements}</li>//in whatever element you want to print

      },this)
         }


        </div>
 )
 }

有关更多详细信息，请参阅es6中的地图或forEAch