Question

我正在尝试通过ajax调用从数据中呈现一个表。这是代码：

IO.Stream

然后表格就像这样呈现：

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

我得到的错误是＆＃34;无法读取属性＆＃39;内容＆＃39; of null＆＃34;但我打印那条线之前的状态。值已设置

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()。具体取决于您是否要格式化它。

ReactJs：简单的渲染表不起作用

1 个答案: