Javascript + React :- 无法将数据放入 table 然后渲染它

Question

import React from 'react';
import { observer } from "mobx-react"
import { inject } from "mobx-react"

@observer
export default class TradeTable extends React.Component {


 render() {

  
  var tableData = this.props.store.arr.map((data) => {
   console.log("The data is "+typeof data)         //The data is Object
   console.log(data.date)
   return data
  })

  console.log(tableData)  // Data is available in object form
  return <div className="panel panel-default">
   <div className="panel-body tradeComponent div-background table-responsive">
    <table className="table table-striped tb div-lightbackground">
     <thead className="thead-dark ">
      <tr>
       <th>Commodity</th>
       <th>Date</th>
       <th>Side</th>
       <th>Qty (MT)</th>
       <th>Price (MT)</th>
       <th>CounterParty</th>
       <th>Location</th>
       <th></th>
      </tr>
     </thead>
     <tbody>
      <tr>

       <td>{tableData.date}</td>         //Not working
       <td>{tableData.commodity}</td>
       <td>{tableData.side}</td>
       <td>{tableData.quantity}</td>
       <td>{tableData.price}</td>
       <td>{tableData.counterparty}</td>
       <td>{tableData.location}</td>
      </tr>

     </tbody>
    </table>
   </div>
  </div>
 }
}

我无法查看 table。我没有收到错误。我可以在控制台记录时查看数据，但我无法查看 [=] 中的数据21=] 需要帮助..我试了几个小时:(

Answer 1

在我看来 tableData 是一个数组。你要找的是这样的东西

export default class TradeTable extends React.Component {


    render() {

        return (<div className="panel panel-default">
            <div className="panel-body tradeComponent div-background table-responsive">
                <table className="table table-striped tb div-lightbackground">
                    <thead className="thead-dark ">
                        <tr>
                            <th>Commodity</th>
                            <th>Date</th>
                            <th>Side</th>
                            <th>Qty (MT)</th>
                            <th>Price (MT)</th>
                            <th>CounterParty</th>
                            <th>Location</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                         {
       this.props.store.arr.map((tableItem, i) => (
        <tr key={i}>
          <td>{tableItem.date}</td>
          <td>{tableItem.commodity}</td>
          <td>{tableItem.side}</td>
          <td>{tableItem.quantity}</td>
          <td>{tableItem.price}</td>
          <td>{tableItem.counterparty}</td>
          <td>{tableItem.location}</td>
        </tr>))}

                    </tbody>
                </table>
            </div>
        </div>)
    }
}

请注意，使用 i（索引）作为键是不好的做法。因此请考虑为您的密钥使用唯一属性希望对你有帮助

Javascript + React :- 无法将数据放入 table 然后渲染它

Javascript + React :- Unable to put the data in table and then render it

javascript

twitter-bootstrap

reactjs

mobx