Question

我正在尝试创建一个可以保存和加载的家庭组件中管理的动态视图列表。保存和加载函数工作正常，但是在Footer.js渲染方法中从map函数返回的span中调用它时出现以下错误

Uncaught TypeError: Cannot read property 'props' of undefined

如何在这些元素中访问此函数调用？

Footer.js

export default class Footer extends React.Component {
constructor(props) {
    super(props);
}

render() {

    return (
        <div className="footer hbox">
            <div className="views hbox">

                <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                    {this.props.getViewNames().map(function(viewName){
                      return (
                        <span onClick={(e)=>this.props.loadView(viewName)}>
                        {viewName}
                      </span>
                      );
                    })}

        </div>
    );
 }
}

Answer 1

您忘了为getViewNames.map()使用arrow function，因此this的词汇范围未保留在您的代码中 - 这很有趣，考虑到您确实使用了正确的方法在其他地方。

所以就这样做：

this.props.getViewNames().map(viewName => {
    ...
});

另见：

How to access the correct `this` context inside a callback?

Answer 2

你无法在map函数中访问props的原因是你函数内的this引用了map函数的context，而不是React Component。您需要使用地图函数上的bind(this)或arrow functions

将地图函数绑定到React Component上下文

使用bind（this）

export default class Footer extends React.Component {
constructor(props) {
    super(props);
}

render() {

    return (
        <div className="footer hbox">
            <div className="views hbox">

                <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                    {this.props.getViewNames().map(function(viewName){
                      return (
                        <span onClick={(e)=>this.props.loadView(viewName)}>
                        {viewName}
                      </span>
                      );
                    }.bind(this))}

        </div>
    );
 }
}

使用箭头功能

export default class Footer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="footer hbox">
                <div className="views hbox">

                    <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                    <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                    <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                        {this.props.getViewNames().map((viewName) => {
                          return (
                            <span onClick={(e)=>this.props.loadView(viewName)}>
                            {viewName}
                          </span>
                          );
                        })}

            </div>
        );
     }
    }

在render方法中访问道具到映射对象

2 个答案: