Ausweiche von Komponenten in html reagieren

Question

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

Diese meine Schleife für mehrere tr Komponenten ist, die ich versuche, auf der Seite angezeigt werden wie folgt

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

Meine Transaktion Row Komponente:

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 

Aber ich erhalte einen Fehler Jedes Kind in einem Array oder Iterator sollte eine einzigartige "Schlüssel" Stütze haben.

Answer 1

Es Duplikat betrachtet wird, weil Sie den gleichen Schlüssel zu TransactionTableRow zuweisen und dann in dem tr-Elemente. Sie können den Schlüssel im tr-Element entfernen. Bitte beachten Sie https://facebook.github.io/react/docs/lists-and-keys.html#extracting-components-with-keys

Answer 2

Ausgabe einfach ist, key ein reserviertes Schlüsselwort ist, wird es nicht an untergeordnete Komponente übergeben bekommen, einen anderen Namen verwenden, verwenden Sie diese:

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



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

Wenn Sie dies nur überprüfen möchten legte eine console.log('key', key), wie folgt aus:

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

Es undefined gedruckt wird.

Answer 3

Es ist nicht erforderlich, dass Sie den Schlüssel für die Tabellenzeile in der TransactionTableRow Komponente zuweisen, da Sie ihm bereits innerhalb der Karte zuweisen. Auch da key ein reserviertes Attribut ist, wird es nicht als Requisite weitergegeben. Ändern Sie den Code zu folgenden

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 Komponente

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