React - 显示对象的所有属性

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 未捕获的类型错误：无法读取未定义的属性“状态”

在 app.js:57763

在 Array.map()

在 FreightRelayWithPricesAndAreas.render (app.js:57759)

在finishClassComponent (app.js:48488)

在 updateClassComponent (app.js:48465)

在开始工作 (app.js:48840)

在 performUnitOfWork (app.js:50839)

在 workLoop (app.js:50903)

在 HTMLUnknownElement.callCallback (app.js:41157)

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