数组中的函数引用答案

【问题标题】：Function reference in array数组中的函数引用
【发布时间】：2015-06-07 12:40:08
【问题描述】：

我尝试在一个数组中定义一些步骤（我称它们为页面），并且每个页面都应该有可能在进入时调用一个函数。

我的页面定义在一个页面数组中，并且 nextHandler（自定义方法）设置当前页面索引并尝试调用定义的函数。我的 React 类看起来（缩写）是这样的：

var App = React.createClass({
    pageDefinitions: [
        {
            title: "Page 1",
            enterFunction: this.enterPageOne
        }
    ],

    enterPageOne: function() {
        console.log("Something useful here");
    },

    nextHandler: function() {
        var st = this.getState();
        st.currentPageIndex = st.currentPageIndex + 1;
        this.setState(st);
        var page = this.pageDefinitions[this.state.currentPageIndex];
        console.log(typeof page.enterFunction);
        console.log(page.title);
        if ( typeof page.enterFunction === "function") {
            page.enterFunction();
        }
    },

    getInitialState: function() {
        return {
            currentPageIndex = -1
        };
    },

    render: function() {
        return (
            <div>Left out</div>
    }
});

虽然title 在控制台上正确打印，但函数始终未定义。如何在我的数组中提供函数引用？

编辑：正如@gillesc 和@justin-morgan 指出的，这是范围问题（这是pageDefinition，而不是类）

编辑 2： 找到解决方案，我将 pageDefinitions 更改为 getPageDefinitions()，如下所示：

getPageDefinitions: funtion() {
    var self = this;
    return [
        {
            title: "Page 1",
            enterFunction: selfenterPageOne
        }
    ];
}

【问题讨论】：

pageDefinitions 是一个对象数组，因此第一个对象中的 this 将引用数组内的对象，而不是您的主对象。所以基本上this.enterPageOne 是未定义的。

标签： javascript reactjs

【解决方案1】：

this.enterPageOne 未定义，因为this 不受您认为的约束。试试这个：

var enterPageOne = function() {
    console.log("Something useful here");
};

var App = React.createClass({
    pageDefinitions: [
        {
            title: "Page 1",
            enterFunction: enterPageOne
        }
    ],
    //...etc.

【讨论】：

现在我在第 5 行出现错误 enterFunction: context.enterPageOne: Uncaught TypeError: Cannot read property 'enterPageOne' of undefined
@Sascha - 我不敢相信我就这么做了。我的 context 对象此时也将未定义。立即尝试。
这行得通，但是函数需要访问 App 类的 state 属性，所以我只是这样移动问题
@Sascha - 这听起来像是一个无关的问题，因为现在我们正在讨论 enterPageOne 运行时的上下文。我对 React 了解不多，但是如果它在运行 enterPageOne 时将 this 绑定到上下文，并且如果 state 属性成为该上下文的一部分，那么您应该可以正常访问它。希望这是有道理的。
不幸的是，状态似乎是通过React.createClass 调用添加的，并且可以提供初始状态是我在示例代码中留下的getInitialState 方法。将方法移出React.createClass 的上下文会删除对状态方法的访问。你可以有多个不共享状态的 React 类。

【解决方案2】：

如果你不想要App 组件之外的全局函数，你可以试试这个。它不吸引人，但您可以在范围内管理它。

 nextHandler: function() {
    ...
    var page = this.pageDefinitions[this.state.currentPageIndex];
    //register enterPageOne function into the array
    page.enterFunction = this.enterOnePage;
    console.log(typeof page.enterFunction);
    console.log(page.title);
    if ( typeof page.enterFunction === "function") {
        page.enterFunction();
    }
},

【讨论】：

采取你的方法我可以直接调用函数，还是我错过了一点？

【解决方案3】：

不要在类级别定义数组，而是定义返回数组的函数：

getPageDefinitions: funtion() {
    var self = this;
    return [
        {
            title: "Page 1",
            enterFunction: selfenterPageOne
        }
    ];
}

请注意：作为一个缺点，这将在每次调用时创建一个新数组。这个应该考虑

【讨论】：