會讓站到html中反應

formRowData() 
{ 
    if (!this.props.payments.result) 
    { 
     return; 
    } 
    const tableRows = this.props.payments.result.content.map((payment) => { 
     payment = payment.payment; 
     return <TransactionTableRow key={payment.paymentId} transactionRowData={payment}/> 
    }) 

    return tableRows; 
}

這是我這我想如下會讓站到html中反應

<TransactionsDashboard merchant={this.props.merchant} transactionsData={this.formRowData()} statsTableData={this.getStatsTableData()} />

我的交易行組件在頁面上顯示多個TR組件循環：

import React from 'react' 

const TransactionTableRow = ({key,transactionRowData}) => { 
    return (
     <tr key={key}> 
      <td height="70"><span className="txt-spcng">19 Jan 17<br /><small className="grey-txt">19 Jan 17</small></span></td> 
      <td>{transactionRowData.paymentId}</td> 
      <td>KTU7-ZAUOSPZ</td> 
      <td><span className="txt-limit">firstname.lastnasdsd</span></td> 
      <td className="amnt-dbt">&#8377; {transactionRowData.amount}</td> 
      <td><span className="txt-limit">Payment Successdd sdsd d</span></td> 
      <td align="center"><div className="tl-tip"><a href="javscript:void(0)" className="icon-dotted"></a></div></td> 
     </tr> 
    ) 
} 

export default TransactionTableRow

但我得到一個錯誤數組或迭代器中的每個孩子應該有一個獨特的「鑰匙」道具。

來源

2017-04-03 vini

也許鍵是不是唯一的？ –

@OliverCharlesworth他們是獨一無二的。 – vini

似乎React不同意你的意見;）你可以在'map'主體內執行'console.log（payment.paymentId）'*並將結果添加到你的問題中？ –

-1

因爲你分配在它相同的密鑰來TransactionTableRow然後tr元素它被認爲是重複的。您可以刪除tr元素中的鍵。如果你只想驗證這一

<TransactionTableRow unique_id={payment.paymentId}.... 



const TransactionTableRow = ({unique_id,transactionRowData}) => { 
    return (
     <tr key={unique_id}> 
     .....

：請參考https://facebook.github.io/react/docs/lists-and-keys.html#extracting-components-with-keys

來源

2017-04-03 09:19:19 micebrain

這聽起來不對。反應是（或應該）只考慮兄弟姐妹的關鍵。 –

關鍵應該只在TransationTableRow中，它在tr元素中不需要 - 對reactjs文檔更加明確的解釋https://facebook.github.io/react/docs/lists-and-keys.html#extracting-components -with-keys – micebrain

當然，這是不必要的 - 但它不會破壞任何東西。 –

問題是簡單的，key是保留關鍵字，它不會傳遞到子組件，使用一些其他的名字，用這個把console.log('key', key)，像這樣：

const TransactionTableRow = ({unique_id,transactionRowData}) => { 
    console.log('key', key); 
    return (
    ....

這將打印undefined。

來源

2017-04-03 09:40:02

因爲您已經在地圖內指定了它，所以您無需爲TransactionTableRow組件中的表格行分配鍵。此外，由於key是保留屬性，因此不會作爲道具傳遞。你的代碼更改爲以下

formRowData() 
{ 
    if (!this.props.payments.result) 
    { 
     return; 
    } 
    const tableRows = this.props.payments.result.content.map((payment) => { 
     payment = payment.payment; 
     return <TransactionTableRow key={payment.paymentId} transactionRowData={payment}/> 
    }) 

    return tableRows; 
}

TransactionRow組件

const TransactionTableRow = ({transactionRowData}) => { 
    return (
     <tr> 
      <td height="70"><span className="txt-spcng">19 Jan 17<br /><small className="grey-txt">19 Jan 17</small></span></td> 
      <td>{transactionRowData.paymentId}</td> 
      <td>KTU7-ZAUOSPZ</td> 
      <td><span className="txt-limit">firstname.lastnasdsd</span></td> 
      <td className="amnt-dbt">&#8377; {transactionRowData.amount}</td> 
      <td><span className="txt-limit">Payment Successdd sdsd d</span></td> 
      <td align="center"><div className="tl-tip"><a href="javscript:void(0)" className="icon-dotted"></a></div></td> 
     </tr> 
    ) 
} 

export default TransactionTableRow

來源

2017-04-03 11:00:21

會讓站到html中反應

回答

相關問題