反应：'map' 未定义

Question

我正在尝试创建一个应用程序，将在 table 表单中输入的信息添加到 table。但是在使用智能合约之前，我想尝试仅使用 js 来完成它，方法是遵循另一个 SO 用户之前给出的 CodePen (https://codepen.io/giumagnani/pen/BJMrzW?editors=0010)。

但我收到以下错误：

TypeError: Cannot read property 'map' of undefined.

代码如下：

class App extends Component {
  constructor() {
    super();
    this.state = {
      orderCount: 0,
      OrderIDInput: null,
      numberOfUpdate: null,
      BarcodeInput: null,
      initiatingCounterparty: '0x0',
      ProductListInput: '',
      TemperatureMinimalInput: null,
      TemperatureMaximalInput: null,
      ExpirationDateInput: '',
      FinalDestinationInput: '',
      date: '',
      orders: []
    }

  };


  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contracts...</div>;
    }
    const orders = this.orders;
    return (
      <div className="App">

        <div id="OrderListTable" class="List">
          <h2>Orders</h2>
          <table id="ShipmentList" class="Shipment_List">
            <thead>
              <tr>
                <th id="OC01" class="Column">OrderID</th>
                <th id="OC02" class="Column">Number of update</th>
                <th id="OC03" class="Column">Barcode</th>
                <th id="OC04" class="Column">Initial counterparty</th>
                <th id="OC05" class="Column">Product list</th>
                <th id="OC06" class="Column">Minimum temperature</th>
                <th id="OC07" class="Column">Maximum temperature</th>
                <th id="OC08" class="Column">Final destination</th>
                <th id="OC09" class="Column">Expiration date</th>
                <th id="OC10" class="Column">Date of modification</th>
              </tr>
            </thead>
            <tbody>
              {orders.map(order => {
                return (
                  <tr>
                    <td>{order.OrderIDInput}</td>
                    <td>{order.numberOfUpdate}</td>
                    <td>{order.BarcodeInput}</td>
                    <td>{order.initiatingCounterparty}</td>
                    <td>{order.ProductListInput}</td>
                    <td>{order.TemperatureMinimalInput}</td>
                    <td>{order.TemperatureMaximalInput}</td>
                    <td>{order.FinalDestinationInput}</td>
                    <td>{order.ExpirationDateInput}</td>
                    <td>{order.date}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

      </div>
    );
  }
}

export default App;

Answer 1

你在分配 const orders = this.orders; 时遗漏了 state 它应该是

 const orders = this.state.orders;

Answer 2

确保您传递的是一个数组。回溯应该是数组的数据（map() 正在使用的数据）。 console.log 随处可见。

Answer 3

如此接近，您正试图将状态上的订单属性放入变量中，但您设置错误。应该是这样；

  const orders = this.state.orders;

反应：'map' 未定义

React: 'map' is undefined

javascript

reactjs

truffle