Question

＆＃13;

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

＆＃13;

我无法查看该表。我没有收到错误。我可以在每次操作系统登录时查看数据，但我无法查看表中的数据。需要紧急帮助..i我想要几个小时:(

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： - 无法将数据放入表中然后呈现它

1 个答案: