Question

如何在我的页面上显示多个组件refundTimeLine显示[Object object]。

代码：

let tdWidth = "25%"
let refundTimeLine = "";
transactionJourney.map((trans) => {
    if(trans.key=="refund") {
        trans.value.forEach((refundRow) => {
            console.log(refundRow);
            refundTimeLine+= <TimelineStatus tdWidth={tdWidth} statusObj={{date: refundRow.date, time: refundRow.time}} statusClass={statusIcon} tickClass={tickClass} text={"Refund of "+refundRow.amount} />
        })
    }
})

console.log(refundTimeLine);
return (
    <tr>
        <TimelineStatus tdWidth={tdWidth} statusObj={_this.getStatusObject('paymentInitiated')} statusClass={statusIcon} tickClass={tickClass} text={"Payment Initiated"} />
        <TimelineStatus tdWidth={tdWidth} statusObj={_this.getStatusObject('paymentSuccessful')} statusClass={statusIcon} tickClass={tickClass} text={"Payment Succesful"} />
        <TimelineStatus tdWidth={tdWidth} statusObj={_this.getStatusObject('settlementInProgress')} statusClass={statusIcon} tickClass={tickClass} text={"Settlement in Progress"} />
        <TimelineStatus tdWidth={tdWidth} statusClass={statusIconDisabled} tickClass={tickClass} text={[_this.props.transactionData.paymentBreakUp.amountSettled+" will be",<br/>,  "credited to your bank",<br/>,"account in 72 hours"]} />
        {refundTimeLine}
    </tr>
)

请帮助新的React

Answer 1

原因，您最初将refundTimeLine定义为string，然后使用react附加+=组件。而不是将refundTimeLine定义为array并将react组件推送到其中。

像这样写：

let refundTimeLine = [];
transactionJourney.map( (trans, i) => {
   if(trans.key=="refund") {

      trans.value.forEach((refundRow, j) => {
          refundTimeLine.push(<TimelineStatus
                                  key={i + '_' + j}   //add a unique key 
                                  tdWidth={tdWidth} 
                                  statusObj={{date: refundRow.date, time: refundRow.time}} 
                                  statusClass={statusIcon} 
                                  tickClass={tickClass} 
                                  text={"Refund of "+refundRow.amount} 
                              />)
      })

   }
})

建议：

1-您在此处使用的是map，而不是使用forEach。

2-别忘了为loop内创建的每个ui元素分配唯一键，它会帮助React识别出已更改的项目，如果发生任何变化，它将改善性能。

组合多个React组件

1 个答案: