ReactJS / Javascript - 无法为对象中的项目渲染组件

Question

I'm having some trouble rendering components for each instance of an item in an object.

While I'm able to log the individual titles of each item, the return function doesn't return anything, regardless of which component I try to return. There are no errors, apparently.

Is there perhaps a better way of returning components according to each item in an object?

Any help would be greatly appreciated! :)

 import React, { Component } from 'react'; export default class Wrapper extends Component { const obj = () => ({ "one": { "title": "one", "description": "foo", }, "two": { "title": "two", "description": "bar", }, }); renderSingleItem(instance) { console.log(instance); // THIS WORKS JUST FINE! return ( // THIS DOESN'T WORK?! <h2 key={instance.title}> {instance.description} </h2> ); } renderAllItems(data) { Object.entries(data).forEach(([key, instance]) => { return this.renderSingleItem(instance); }); } render() { return ( <div> {this.renderAllItems(this.obj)} </div> ); } }

 <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>

I've also attempted the following method, which actually renders a component, but only for the first item in the object.

 import React, { Component } from 'react'; export default class Wrapper extends Component { const obj = () => ({ "one": { "title": "one", "description": "foo", }, "two": { "title": "two", "description": "bar", }, }); renderSingleItem(instance) { console.log(instance); return ( <h2 key={instance.title}> {instance.description} </h2> ); } renderAllItems(data) { for (var key in data) { if (data.hasOwnProperty(key)) { var instance = data[key]; for (var prop in instance) { if (instance.hasOwnProperty(prop)) { return (this.renderSingleItem(instance)); } } } } } render() { return ( <div> {this.renderAllItems(this.obj)} </div> ); } }

 <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>

FYI, in my project, I'm importing a JSON object.

Answer 1

You have 2 issues in this function.

renderAllItems(data) {
        Object.entries(data).forEach(([key, instance]) => {
            return this.renderSingleItem(instance);
        });
    }

You need to add another return before Object.keys and you should be using .map and not .forEach since forEach is void, meaning it wont return anything.

The code should look like this.

renderAllItems(data) {
       return Object.entries(data).map(([key, instance]) => {
            return this.renderSingleItem(instance);
        });
    }

Answer 2

This solution worked great for me:

 import React from 'react'; import { render } from 'react-dom'; export default class Wrapper extends React.Component { constructor(props) { super(props) this.obj = { "one": { "title": "one", "description": "foo", }, "two": { "title": "two", "description": "bar", }, }; } renderSingleItem(instance, k) { console.log(instance); // THIS WORKS JUST FINE! return (<h2 key={k} children={instance.description} />); } /* * Not necessary renderAllItems(data) { Object.entries(data).forEach(([key, instance]) => { return this.renderSingleItem(instance); }); }*/ render() { return ( <div> {Object.keys(this.obj).map((k) => { return this.renderSingleItem(this.obj[k], k); })} </div> ); } } // I'll leave this for you // render(<Wrapper />, document.getElementById('root'));