Question

我使用：反应 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 开始返回旧数据。示例代码：

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
    // ...
})

Answer 2

我认为在第二个示例中，您应该使用this.handleScroll而不是handleScroll。那样this将始终指向组件的正确上下文。

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

2 个答案: