Javascript 在componentWillMount内调用函数内部的操作将导致无法读取未定义的属性

对于React和ES6约定来说，这是非常新的。我试图从

组件willmount（）

内部的函数中调用操作。这将导致

未捕获类型错误：无法读取未定义的属性“signoutUser”

。不太确定如何解决，尝试绑定此，这确实解决了问题

这是当前形式的“我的代码”：

// left_site.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { signoutUser } from '../actions/authentication';

export default function(ComposedComponent) {
    class LeftSite extends Component {

        constructor(props, context) {
            super(props, context);
        }

        componentWillMount() {

            var timerLeft = setInterval(timer, 1000);

            function timer() {

                if ((sessionStorage.getItem('timer') > 0) && 
                    (new Date().getTime() - sessionStorage.getItem('timer') > 5000)) {
                    this.props.signoutUser();
                } else {
                    sessionStorage.setItem('timer', new Date().getTime());
                }
            }
        }

        render() {
            return <ComposedComponent {...this.props} />
        }
    }

    return connect( null, { signoutUser })(LeftSite);
}

//left_site.js
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../actions/authentication”导入{signoutUser}；
导出默认函数（ComposedComponent）{
类LeftSite扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
}
组件willmount（）{
var timerLeft=设置间隔（计时器，1000）；
函数计时器（）{
如果（（sessionStorage.getItem（'timer'）>0）和
（新日期（）.getTime（）-sessionStorage.getItem（'timer'）>5000））{
this.props.signoutUser（）；
}否则{
setItem（'timer'，new Date（）.getTime（））；
}
}
}
render（）{
返回
}
}
返回连接（null，{signoutUser}）（LeftSite）；
}

为了解释发生了什么，该公司希望用户在从域上的任何受保护路由导航到另一个域时自动注销。一个想法是创建一个“心跳”，只要用户在域上的受保护路由上，该心跳就会将时间每秒提交给

sessionStorage

。其想法是，如果用户导航到另一个域，然后尝试返回，如果上次存储的时间与当前时间的差值大于5000毫秒，则会自动注销

也许有更好的方法可以做到这一点，但我想不出一种方法1）不会侵犯隐私，或者2）不会通过刷新触发注销，例如，

unbind

left_site.js

是一个HOC——如果有人试图在没有身份验证的情况下访问受保护的路由，我也有一个

required_login.js

HOC来重新路由到登录页面——因此我的受保护路由被包装在

组件={LeftSite（RequireAuth（Home））}

中

---

LeftSite

运行正常，但是当条件的计算结果为

true

并尝试触发

this.props.signoutUser（）出现错误。
函数<代码>计时器

未绑定到类。当它以固定的间隔执行时，执行上下文会发生变化。在使用之前必须绑定该函数。还要确保在适当的时间或组件卸载时清除间隔。我建议你这样写

 timer = () => {
   if ((sessionStorage.getItem('timer') > 0) && 
        (new Date().getTime() - sessionStorage.getItem('timer') > 5000)) {
          this.props.signoutUser();
   } else {
      sessionStorage.setItem('timer', new Date().getTime());
   }
}

 componentWillMount() {
   this.timerLeft = setInterval(this.timer, 1000)
 }

 componentWillUnmount() {
   clearInterval(this.timerLeft);
 }

---

函数

计时器

未绑定到类。当它以固定的间隔执行时，执行上下文会发生变化。在使用之前必须绑定该函数。还要确保在适当的时间或组件卸载时清除间隔。我建议你这样写

 timer = () => {
   if ((sessionStorage.getItem('timer') > 0) && 
        (new Date().getTime() - sessionStorage.getItem('timer') > 5000)) {
          this.props.signoutUser();
   } else {
      sessionStorage.setItem('timer', new Date().getTime());
   }
}

 componentWillMount() {
   this.timerLeft = setInterval(this.timer, 1000)
 }

 componentWillUnmount() {
   clearInterval(this.timerLeft);
 }

---

您需要将此绑定到计时器函数。更简单且推荐的方法是为计时器定义箭头函数，如下所示：

export default class MyComponent extends React.Component {
  componentWillMount() {
    const timer = () => {
      console.log(this.props); // should be defined
    };

    const timerLeft = setInterval(timer, 1000);
  }
}

---

这是因为对于箭头函数，

This

被设置为封闭上下文的

This

。

您需要将

This

绑定到计时器函数。更简单且推荐的方法是为计时器定义箭头函数，如下所示：

export default class MyComponent extends React.Component {
  componentWillMount() {
    const timer = () => {
      console.log(this.props); // should be defined
    };

    const timerLeft = setInterval(timer, 1000);
  }
}

---

这是因为对于箭头函数，

此

设置为所包含上下文的

此

。

您可能需要将

此

绑定到计时器函数。退房它讨论了事件处理程序，但我认为它也适用于您的情况，因为这是一个回调，您可能需要将

this

绑定到计时器函数。退房它讨论了事件处理程序，但我认为它也适用于您的案例，因为它是回调