反应：“地图”未定义

如何解决反应：“地图”未定义

我正在尝试创建一个应用程序，该应用程序将在表格中输入的信息添加到表格中。但是在使用智能合约之前，我想通过遵循另一个SO用户（https://codepen.io/giumagnani/pen/BJMrzW?editors=0010）先前提供的CodePen尝试仅使用js来实现。

但是出现以下错误：

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;

解决方法

如此接近，您试图将状态上的orders属性放入变量中，但随后将其设置为错误。 应该是这样

  const orders = this.state.orders;

,

您在分配state时缺少 const orders = this.orders;

 const orders = this.state.orders;

,

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