如何在React中渲染一个对象？

Question

我想呈现一个对象。

我的对象是：

const ObjectTest = {
        1: {
            id : 1,
            name:'ABC'
        },
        3: {
            id: 3,
            name:'DEF'
        }
}

我希望它呈现为:

id is 1 ; name is ABC
id is 3 ; name is DEF

我想将这个对象制作为一个函数，并在render函数中调用它。

- Voi Mập

Answer 1

数据是一个对象，所以我们不能直接在其上使用map函数，可以使用Object.keys或Object.entries先获取数组，然后在该数组上使用map函数来创建UI项。

使用Object.keys：

_renderObject(){
    return Object.keys(ObjectTest).map((obj, i) => {
        return (
            <div>
                id is: {ObjectTest[obj].id} ;
                name is: {ObjectTest[obj].name}
            </div>
        )
    })
}

使用Object.entries：

const ObjectTest = {
    1: {
        id : 1,
        name:'ABC'
    },
    3: {
        id: 3,
        name:'DEF'
    }
}

class App extends React.Component{

    _renderObject(){
        return Object.entries(ObjectTest).map(([key, value], i) => {
            return (
                <div key={key}>
                    id is: {value.id} ;
                    name is: {value.name}
                </div>
            )
        })
    }

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

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

检查这个答案也可以：在React中循环一个对象？

- Mayank Shukla

---

你在map函数中的Object.keys示例中缺少了括号。正确的写法是：code: return Object.keys(ObjectTest).map((obj, i) => { - undefined

Answer 2

所有这些映射... 呃。使用带有JSON.stringify的 "pre" 标记。

<pre>
  {JSON.stringify(yourdataobject, null, 2)}
</pre>

pre标签表示预格式化文本。它的意思是任何在标签内的内容都会以固定宽度显示，并保留换行和空格（就像HTML代码中写的一样）。

JSON.stringify的作用很明显——将传入其第一个参数的对象转换为JSON字符串。第二个参数是一个替换函数，在此不相关。第三个参数是要使用的缩进量——在本例中为2个空格（由于pre标签，这将被保留）。

- Mechawolf

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 3

const ObjectTest = {
        1: {
            id : 1,
            name:'ABC'
        },
        3: {
            id: 3,
            name:'DEF'
        }
}
render(){
   return (
         <div>
            Object.keys(ObjectTest).map( (key)=> {
              return <div>
                 <span>"Id is:"{key}<span>
                 <span>"Name is:"{ObjectTest[key].name}<span>
              </div>
            })
         </div>
   )
}

- Ved

Answer 4

在React中，您可以通过以下代码在浏览器屏幕上呈现您想要的答案。

import React from 'react';


const ObjectTest = {
  1: {
      id : 1,
      name:'ABC'
  },
  3: {
      id: 3,
      name:'DEF'
  }
}

class App extends React.Component {

   constructor(props) {
      super(props);
   };

   render() {
      return (
         <div>
         {
            Object.keys(ObjectTest).map((value,index)=>{
               <p>id is {ObjectTest[value].id} ; name is {ObjectTest[value].name}</p>
            });
         }
         </div>
      );
   }
}

export default App;

- vnomvk

Answer 5

我想知道为什么似乎几乎每个人都在使用Object.keys！

Object.values(ObjectTest).map((row_, index) =>
    <tr>
    {Object.values(row_).map(item => <td>{item}</td>)}
    </tr>
)}

示例数据：

const ObjectTest = {
        1: {
            id : 1,
            name:'ABC'
        },
        3: {
            id: 3,
            name:'DEF'
        }
}

- M at