Question

我有一个函数来获取容器的宽度。当窗口改变大小时，每次调用此函数。在此函数中，我将状态“containerWidth”设置为容器的当前宽度。我需要宽度，用于函数getNumberOfItems，它计算容器中适合的项目数。但是当我更改窗口大小并设置状态“containerWidth”时，函数“getNumberofItems”不会更新。如何在每次窗口大小改变时调用函数“getNumberOfItems”（使用新的状态containerWidth）？

感谢您的帮助

  getContainerWidth() {
    let width = document.getElementsByClassName('container')[0].offsetWidth + 'px';
    this.setState({
      containerWidth: width,
    });
  }

getNumberOfItems(){
  let width = this.state.containerWidth;
  let postWidth = this.state.postWidth;
  ...
  ...
  ...
  return numberOfItems;
}

componentDidMount() {
    window.addEventListener("resize", this.getContainerWidth.bind(this));
  }

  componentWillMount() {
    this.getContainerWidth.bind(this);
    this.getNumberOfItems();
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.getNumberOfItems.bind(this));
  }

Answer 1

由于node 'testnode' { include testmodule::basics User<title == 'testuser'> { groups => 'testgroup' } }仅在组件安装之前被调用，因此componentWillMount函数未在getNumberOfItems更改时调用，您可以执行的操作是从{{1}调用它像

这样的功能

containerWidth

Answer 2

setState方法将回调方法作为第二个参数。所以你可以这样做：

getContainerWidth() {
let width = document.getElementsByClassName('container')[0].offsetWidth + 'px';
this.setState({
  containerWidth: width,
},this.getNumberOfItems);

}

在setState之后反应更新组件

2 个答案: