如何在循環內打印功能組件-React JS

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

實際上缺少的是渲染器內部的return語句，並且函數的不同閉包都不正確，例如：

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

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

如您所見，您正在關閉不是corret的`（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>
        )

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}/>}位於map函數內部

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