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

Question

我在为对象中的每个项目实例渲染组件时遇到了一些问题。

虽然我能够记录每个项目的各个标题，但返回函数不会返回任何内容，无论我尝试返回哪个组件。显然没有错误。

是否有更好的方法可以根据对象中的每个项目返回组件？

任何帮助将不胜感激！ :)

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>

我还尝试了以下方法，它实际上呈现了一个组件，但仅用于对象中的第一个项目。

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>

仅供参考，在我的项目中，我正在导入一个JSON对象。

Answer 1

您在此功能中有2个问题。

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

你需要在Object.keys之前添加另一个回报，你应该使用.map而不是.forEach，因为forEach是无效的，这意味着它不会返回任何东西。

代码应如下所示。

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

Answer 2

这个solution对我很有用：

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'));