Question

我想在循环中打印我的功能组件。但是我收到了这个错误：

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

                                  }

...

)

}

我的错误行就在这一行：

{<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;

Answer 1

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

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

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

正如您所看到的，您正在关闭不正确的`（item =＆gt; {....}）。

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

Answer 2

这条线确实是错的。你需要返回组件，现在你只需将它包装在大括号中，这在上下文中没有意义。

该错误的行应改为

return <MyShadyabsRow  row={row}/>;

我假设你想为MyShadyabsRow中的每个密钥渲染一个reducedData组件。

Answer 3

Map函数将返回多个组件，因为您有外部对象键，它将再次迭代。因此，从map函数中，您无法将JSX组件渲染到数组的每个元素。这就是括号语法无效的原因。

{ 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}/>)
                                    }





                                   )
        })

Answer 4

您的{<MyShadyabsRow row={row}/>}位于地图功能

内

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

如何在循环内打印功能组件 - 反应js

4 个答案: