Javascript ES6箭头语法返回函数not值

我正在创建子组件的react组件，包括：

const Miniviews = ({reducedArry}) => {
  Object.keys(reducedArry).map((applicationId) => {
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
        )}
      </div>
    )
  })
};
console.log(Miniviews);

我如何让它返回我所期望的，即：

<div id="1">
<Miniview />
<Miniview />
</div>
<div id="2">
<Miniview / >
</div>

---

您永远不会从

迷你视图

功能返回任何内容

试试这个：

const Miniviews = ({reducedArry}) => {
 return Object.keys(reducedArry).map((applicationId) => {
   return (
     <div id={applicationId}>
       {reducedArry[applicationId].map(miniview => (
         <Miniview
           key={miniview.id}
           id={miniview.id}
           title={miniview.name}
           handleOpenButton={this.handleMiniviewOpenView}
           />)
         )}
       </div>
     )
   })
 };

const Miniviews=（{reducedArry}）=>{
返回Object.keys（reducedArry.map）（（applicationId）=>{
返回(
{reducedArry[applicationId].map（迷你视图=>(
)
)}
)
})
};

两个问题：

“miniView的值实际上不是函数返回的对象”没错，您将

miniView

定义为函数（箭头函数），而不是调用它。要调用它，您需要在之后执行

Miniviews（relevantArgumentHere）

您使用的是详细箭头函数，这意味着您需要使用显式的

返回。如果使用简洁的箭头函数（在
=>
之后没有
{
），则返回是隐式的

下面是一个简明箭头函数的示例：

const f = () => "foo";

和等效的详细信息：

const f = () => { return "foo"; };

因此，要么简洁：

const Miniviews = ({reducedArry}) => // Note no { here
  Object.keys(reducedArry).map((applicationId) => {
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
        )}
      </div>
    )
  })
; // And no } before the ; here
console.log(Miniviews(someArgumentHere));
//                   ^^^^^^^^^^^^^^^^^^----- calling the function

---

功能（

Miniviews

）没有调用，因此

Miniviews

的值仍然只是一个函数引用。函数也没有被调用，对吗？@Pointy:是的，我刚刚在上面添加了#1，我错过了问题中关于

控制台.log

最初结果的注释。使用返回给我一个：Uncaught TypeError:无法转换未定义或为空object@Wayneio：如果您将

返回值放在上面的位置，则不应该这样做。（旁注：我删除了简明格式中错误的
}
，现已修复，但如果您添加了返回值并保留详细格式，则不会有问题。）对于此类问题，使用堆栈片段（
[]
工具栏按钮）放置可运行的文件非常有用。堆栈代码段支持React，包括JSX。这样，帮助您的人就可以看到问题的实际发生，并在他们的答案中向您展示解决方案。
const f = () => { return "foo"; };

const Miniviews = ({reducedArry}) => // Note no { here
  Object.keys(reducedArry).map((applicationId) => {
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
        )}
      </div>
    )
  })
; // And no } before the ; here
console.log(Miniviews(someArgumentHere));
//                   ^^^^^^^^^^^^^^^^^^----- calling the function

const Miniviews = ({reducedArry}) => {
  return Object.keys(reducedArry).map((applicationId) => {
// ^^-- note this return
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
          )}
      </div>
    )
  })
};
console.log(Miniviews(someArgumentHere));
//                   ^^^^^^^^^^^^^^^^^^----- calling the function