レンダリングに2時間をかけました1 オブジェクトです。オブジェクトをどのように反応させますか？
私のオブジェクトは、次のとおりです。
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
私はレンダリングしたい：機能で、私はこのオブジェクトを作りたい
id is 1 ; name is ABC
id is 3 ; name is DEF
をして機能をレンダリングに呼ばれています。
誰でも手伝ってもらえますか？事前にすべてに感謝:)
データには、直接私たちはUIアイテムを作成することにmapを使用し、その後、その上でマップを使用するので、最初の配列を取得するためにObject.keysまたはObject.entriesを使用することはできませんオブジェクトです。 Object.entries使用
_renderObject(){
return Object.keys(ObjectTest).map(obj, i) => {
return (
<div>
id is: {ObjectTest[obj].id} ;
name is: {ObjectTest[obj].name}
</div>
)
})
}
：
Object.keysを使用して
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
class App extends React.Component{
\t _renderObject(){
\t \t return Object.entries(ObjectTest).map(([key, value], i) => {
\t \t \t return (
\t \t \t \t <div key={key}>
\t \t \t \t \t id is: {value.id} ;
\t \t \t \t \t name is: {value.name}
\t \t \t \t </div>
\t \t \t)
\t \t })
\t }
\t render(){
\t \t return(
\t \t \t <div>
\t \t \t \t {this._renderObject()}
\t \t \t </div>
\t \t)
\t }
}
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'/>チェックもこの答え：How to loop an object in ReactJS?
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>
)
}では、コード
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;
以下でブラウザ画面であなたの願いの答えをレンダリングすることができます反応どうもありがとうございました：X：X –