反应：“地图”未定义答案

【问题标题】：React: 'map' is undefined反应：“地图”未定义
【发布时间】：2020-08-28 21:31:46
【问题描述】：

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

但我收到以下错误：

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;

【问题讨论】：

无法复制
const orders = this.state.orders 不是const orders = this.orders

标签： javascript reactjs truffle

【解决方案1】：

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

  const orders = this.state.orders;

【讨论】：

【解决方案2】：

你在分配 const orders = this.orders;时缺少state，它应该是

 const orders = this.state.orders;

【讨论】：

【解决方案3】：

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

【讨论】：