reactjs - React - 显示对象的所有属性

Question

这个问题在这里已经有了答案:

React 'cannot read property of undefined' when using map (4 个回答)

关闭 4年前。

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

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 Uncaught TypeError: Cannot read property 'state' of undefined

at app.js:57763

at Array.map ()

at FreightRelayWithPricesAndAreas.render (app.js:57759)

at finishClassComponent (app.js:48488)

at updateClassComponent (app.js:48465)

at beginWork (app.js:48840)

at performUnitOfWork (app.js:50839)

at workLoop (app.js:50903)

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