ReactJs：简单渲染 table 不工作

Question

我正在尝试根据通过 ajax 调用获得的数据呈现 table。这是代码：

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

然后 table 会像这样呈现：

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

我得到的错误是 "Cannot read property 'content' of null" 但我在该行之前打印了状态。值设置

Answer 1

检查您的 {date} 声明。在内容集合的循环中，您将 date = 设置为新的 javascript 日期。然后在 return 中，将一个 td 的值设置为该日期。

React 无法呈现日期对象。您需要将其设为字符串或有效的 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() 会更好。取决于您是否要格式化它。

ReactJs：简单渲染 table 不工作

ReactJs: Simple render table not working

reactjs

react-jsx