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

【问题标题】：ReactJS / Javascript - Trouble Rendering Components for Items in ObjectReactJS / Javascript - 无法为对象中的项目渲染组件
【发布时间】：2018-03-04 00:35:16
【问题描述】：

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

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

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

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

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 对象。

【问题讨论】：

标签： javascript json reactjs object components

【解决方案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);
        });
    }

【讨论】：

??瞧！非常感谢！
使用Object.keys vs Object.entries
怎么样？因为那只是给我索引。
它应该给你钥匙repl.it/repls/JollyPinkCleaninstall看这个链接

【解决方案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'));

【讨论】：