编辑：

Question

我有这样的对象数据：

[
  {
    "id": "1",
    "obj1": {
      "val1": "15",
      "val2": "2.6"
    },
    "obj2": {
      "val3": "39",
      "val4": "87"
    },
    "arr1": [
      {
        "ar1": "nd",
        "ar11": "https://url"
      },
      {
        "ar1": "eeh",
        "ar11": "url"
      }
    ],
    "arr2": [
      {
        "l1": "land",
        "l2": "re"
      }
    ]
  }
]

我通过道具将这些数据从父组件传递到子组件，并尝试使用map来迭代和呈现输出，如下所示：

import React, {Component} from 'react';

class Output extends Component {

    render() {
          const myobj = this.props;        
          console.log(myobj);
          Object.keys(myobj).map(function(key) {
             return( <div>Key: {key}, Value: {myobj[key]}</div> );
          });
    }
}

export default Output;

但是我知道render必须有一个return语句，所以我应该怎么写呢？

Answer 1

您的收益在.map函数内部。但是它不会在render中返回。您只需要从.map

返回返回的数组

// this return is inside render
return Object.keys(myobj).map(function(key) {
    // this return is inside .map
    return( <div>Key: {key}, Value: {myobj[key]}</div> );
});

编辑：

您应该查看ivica.moke注释，因为您无法渲染对象，所以会出现错误。

我不确定您要做什么，因为在您的问题中，您只提到了问题render must have a return statement。

因此，请解释当该值是一个对象时要做什么以及如何呈现它。

编辑2：

如果要可视化对象内部的内容，可以尝试JSON.stringify(obj, null, 2)

Answer 2

render()方法需要返回一些jsx才能在视图中显示。 .map返回jsx，但没有返回到render方法。添加了return语句

    import React, {Component} from 'react';

        class Output extends Component {

            render() {
              const myobj = this.props;

                 console.log(myobj);
                  return Object.keys(myobj).map(function(key) {
                      return( <div>Key: {key}, Value: {myobj[key]}</div> );
                  });

          }
       }
       export default Output;

您的render方法应该有return语句

2 个答案:

编辑：

编辑2：