Question

我确定，这是一个简单的问题，但实际上我无法找到我的错误所在。我有一个组件，其中一个对象没有固定数量的属性。实际上，我无法显示对象的所有属性。

import React, { Component } from 'react';

class FreightRelayWithPricesAndAreas extends Component {

    constructor(props) {
        super(props);
        this.state = {
          freightRelayPrice: props.freightRelayPrice
        };
    }

    render() {
      const Fragment = React.Fragment;
      return (
        <Fragment>
          <tr>
            {
              Object.keys(this.state.freightRelayPrice).map(function(key) {
                  return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
              })
            }
          </tr>
        </Fragment>
      )
    }
}

export default FreightRelayWithPricesAndAreas

错误总是：

app.js：57763未捕获的TypeError：无法读取属性＆＃39; state＆＃39;的   未定义

在app.js：57763

在Array.map（）

在FreightRelayWithPricesAndAreas.render（app.js：57759）

在finishClassComponent（app.js：48488）

在updateClassComponent（app.js：48465）

在beginWork（app.js：48840）

at performUnitOfWork（app.js：50839）

at workLoop（app.js：50903）

在HTMLUnknownElement.callCallback（app.js：41157）

at Object.invokeGuardedCallbackDev（app.js：41196）

正如我已经说过的，我确信这很简单，但实际上我并没有看到发生这种情况的原因。感谢您的帮助！

Answer 1

Object.keys(this.state.freightRelayPrice).map(function(key) {
   return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
})

内部回调函数this本身就是一个函数上下文。您可以使用箭头功能

Object.keys(this.state.freightRelayPrice).map((key) => {
   return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
})

React - 显示对象的所有属性

1 个答案: