javascript - 为什么 this.props 返回旧数据？

Question

我使用:react v16.2.0、redux v3.7.2、react-redux v5.0.6 在我的项目中。而且我注意到某些代码情况下的神秘行为。

例如，我想为 MyComponent 注册方法 handleScroll。比方说，在此方法中我需要访问 state.MyComponent.ui.myobject。因此，为了访问它，我声明了 mapStateToProps，它将把它的值注册到 this.props.myobject。示例代码:

const mapStateToProps = state => ({
  myobject: state.MyComponent.ui.myobject
  // ...
})

const mapDispatchToProps = dispatch => ({
  // ...
})

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }
  handleScroll () {
    let myobject = this.props.myobject;
    // do calculations
  }
  componentDidMount() {
    document.getElementById('body').addEventListener('scroll', this.handleScroll);
  };
  componentWillUnmount() {
    document.getElementById('body').removeEventListener('scroll', this.handleScroll);
  };
  render(){
    return (
      <div>{/*content*/}</div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

在这种情况下，一切正常，没有错误。但是，当我尝试在组件类之外声明函数 handleScroll 时，在某个时间点 this.props.myobject/strong> 开始返回旧数据。示例代码:

let handleScroll = function () {
  let myobject = this.props.myobject;
  // do calculations
}

const mapStateToProps = state => ({
  myobject: state.MyComponent.ui.myobject
  // ...
})

const mapDispatchToProps = dispatch => ({
  // ...
})

class MyComponent extends Component {
  constructor(props) {
    super(props);
    handleScroll = handleScroll.bind(this);
  }
  componentDidMount() {
    document.getElementById('body').addEventListener('scroll', handleScroll);
  };
  componentWillUnmount() {
    document.getElementById('body').removeEventListener('scroll', handleScroll);
  };
  render(){
    return (
      <div>{/*content*/}</div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

我不知道为什么会这样。任何人都知道在这种情况下会发生什么？感谢您的帮助。

Answer 1

每次运行时:

handleScroll = handleScroll.bind(this)

...您覆盖了在模块级别定义的 handleScroll 引用(本质上是全局范围，但仅对模块可见)。第一个代码示例更有意义。如果没有看到所有代码，就很难确切地知道发生了什么，但是如果您创建了多个 MyComponent 实例，那么我可以看到您可能是如何观察到您所描述的内容的。

此外，你没有问，但我不明白你在这里做什么 - 状态永远不应该包含组件:

const mapStateToProps = state => ({
    myobject: state.MyComponent.ui.myobject
    // ...
})