ReactJs : 간단한 렌더링 테이블이 작동하지 않습니다.

Question

아약스 호출을 통해 얻은 데이터에서 테이블을 렌더링하려고합니다.

let tableResult = null; 
let tableRows = null; 

if(this.state.searchResult === 'records-found') { 

    tableRows = this.state.transactionsData.content.map((item, index) => { 
    let date = new Date(item.dateOfPayment); 
    return (
     <tr key={item.id}> 
     <td>{date}</td> 
     <td>{item.transactionReference}</td> 
     <td>{item.merchantCustomerId}</td> 
     <td>{item.amount}</td> 
     <td>{item.status}</td> 
     </tr> 
    ); 
    }); 

    tableResult = (
    <div className="transactions-table-wrapper"> 
     <div className="transactions-table"> 
     <table> 
      <thead> 
      <tr> 
       <td>Date Of Payment</td> 
       <td>Merchant Reference</td> 
       <td>Customer Id</td> 
       <td>Amount</td> 
       <td>Status</td> 
      </tr> 
      </thead> 
      <tbody> 
      {tableRows} 
      </tbody> 
     </table> 
     </div> 
    </div> 
); 
} 

는 다음 테이블과 같이 표현됩니다 : 다음은 코드가

<div className="transitions-search-result"> 
     {tableResult} 
    </div> 

내가 오류가 "널 (null)의 '내용'속성을 읽을 수 없습니다"하지만 난 그 라인 전의 상태를 인쇄 할 수 있습니다. 값이 설정되었습니다.

Answer 1

{date} 명세서를 확인하십시오. 콘텐츠 컬렉션을 반복하면서 date =를 새 javascript 날짜로 설정합니다. 그런 다음 반환에서 한 td 값을 해당 날짜로 설정합니다.

React가 날짜 개체를 렌더링 할 수 없습니다. 문자열이나 유효한 반응 구성 요소로 만들어야합니다.

tableRows = this.state.transactionsData.content.map((item, index) => { 
    **let date = new Date(item.dateOfPayment);** 
    return (
     <tr key={item.id}> 
     **<td>{date.toString()}</td>** 
     <td>{item.transactionReference}</td> 
     <td>{item.merchantCustomerId}</td> 
     <td>{item.amount}</td> 
     <td>{item.status}</td> 
     </tr> 
    ); 
    }); 

모든 브라우저는 date.toString을 지원해야합니다.

더 나은 것은 date.toDateString() 일 것입니다. 당신이 그것을 포맷하고 싶은지에 따라 우리는 아닙니다.