Javascript 如何在loop-react js中打印功能组件

我想在循环中打印我的功能组件。 但我有一个错误：

SyntaxError: Unexpected token, expected

我的代码：

render(){
 ...

return (

...


    { this.state.coupons.length > 0 ? (

                                    Object.keys(reducedData).map(obj => {

                                              var row = {} ;
                                              row.title = '';
                                              row.coupon_code = '';
                                                reducedData[obj].map(item =>
                                                    {
                                                      row.title = item.title;
                                                      row.coupon_code += item.coupon_code;
                                                    }

                                                     {<MyShadyabsRow  row={row}/>}


                                              )
                                        })

                                  ) : (
                                    <tr></tr>
                                  )

                                  }

...

)

}

render（）{
...
返回(
...
{this.state.coups.length>0(
key（reducedData）.map（obj=>{
var行={}；
row.title=''；
row.U代码=“”；
简化数据[obj]。映射（项=>
{
row.title=item.title；
行.优惠券\代码+=项目.优惠券\代码；
}
{}
)
})
) : (
)
}
...
)
}

我的错误行在这行：

{<MyShadyabsRow  row={row}/>}

{}

我的功能组件：

import React from ‘react’;

const MyShadyabsRow = ({row}) => (
  <tr>
      <td>
          <a href="#">
              <i className="fa fa-print" aria-hidden="true">
                  <span>پرینت</span>
              </i>
          </a>
      </td>
      <td>{row.title}</td>
      <td>۱۳۹۶/۱۰/۱۰</td>
      <td>{row.coupon_code}</td>
  </tr>
);

export default MyShadyabsRow;

从“React”导入React；
常量MyShadyabsRow=（{row}）=>(
{row.title}
۱۳۹۶/۱۰/۱۰
{行.优惠券\代码}
);
导出默认MyShadyabsRow；

您的

{}

在map函数中

reducedData[obj].map(item =>{
      row.title = item.title;
      row.coupon_code += item.coupon_code;
      return (<MyShadyabsRow  row={row}/>);
) 

reducedData[obj]。映射（项=>{
row.title=item.title；
行.优惠券\代码+=项目.优惠券\代码；
返回（）；
) 

实际上，缺少的是呈现内部的return语句，而且函数的不同闭包也不正确，例如：

                                            reducedData[obj].map(item =>
                                                {
                                                  row.title = item.title;
                                                  row.coupon_code += item.coupon_code;
                                                }

                                                 {<MyShadyabsRow  row={row}/>}
                                          )

reducedData[obj]。映射（项=>
{
row.title=item.title；
行.优惠券\代码+=项目.优惠券\代码；
}
{}
)

如您所见，您正在关闭不正确的`（item=>{….}）

this.state.coupons.length > 0 ? (
        Object.keys(reducedData).map(obj => {
            let row = {};
            row.title = '';
            row.coupon_code = '';
            reducedData[obj].map(item => {
                row.title = item.title;
                row.coupon_code += item.coupon_code;
            })
            //this will return the object after the map is applied.
            //the error was on the closure of your code and the use of {} wrapping your component.
            return (<MyShadyabsRow  row = { row } />)
        })): (
            <tr></tr>
        )

this.state.couples.length>0(
key（reducedData）.map（obj=>{
设row={}；
row.title=''；
row.U代码=“”；
简化数据[obj]。映射（项=>{
row.title=item.title；
行.优惠券\代码+=项目.优惠券\代码；
})
//这将在应用贴图后返回对象。
//错误发生在关闭代码和使用{}包装组件时。
返回（）
})): (
)

所讨论的行确实是错误的。您需要返回组件，而现在您只是将其用大括号括起来，这在上下文中没有任何意义

那条有故障的线路应该更换

return <MyShadyabsRow  row={row}/>;

返回；

---

我假设您希望为

reducedData

中的每个键呈现一个

MyShadyabsRow

组件，Map函数将返回多个组件，并且由于您有外部对象键，它将再次迭代。因此，从Map函数中无法呈现JSX组件，您将组件映射到数组的每个元素。这就是为什么括号syntax无效

{ this.state.coupons.length > 0 ? (
   Object.keys(reducedData).map(obj => {
       var row = {} ;
       row.title = '';
       row.coupon_code = '';
       return reducedData[obj].map(item =>
                                   {
                                      row.title = item.title;
                                      row.coupon_code += item.coupon_code;
                                      return (<MyShadyabsRow  row={row}/>)
                                    }





                                   )
        })

{this.state.优惠券.length>0(
key（reducedData）.map（obj=>{
var行={}；
row.title=''；
row.U代码=“”；
返回简化数据[obj]。映射（项=>
{
row.title=item.title；
行.优惠券\代码+=项目.优惠券\代码；
返回（）
}
)
})

为了渲染返回，您必须从map函数返回组件，但因为您有2个map函数。最好的解决方案是创建一个变量，以便能够从外部map函数返回组件。我不确定的是，您是否需要每次在

reducedData[obj]中渲染
.map

函数还是在map函数之后？我想在

简化数据[obj]之后渲染我的组件。map（项=>{row.title=item.title；row.touch\u code+=item.touch\u code；}

。它不工作，我遇到了以下错误：

模块构建失败：语法错误：意外标记，应为，（106:49）[0][0]104 |}[0]105 |[0]>106 |返回[0]| ^[0]107 |[0]108 |[0]109 |）

sorry@S.M_Emamian我把报税表放在地图外面，它在地图里面：）现在检查一下。我不想在map中使用

MyShadyabsRow

组件。@S.M_Emamian抱歉，我注意到了我的错误，我以为你想返回数组中的数组，而不是返回第二个数组中的对象总和。我编辑了我的答案以适应这种方法。看一看。