Question

我正在尝试一个非常容易的事情，即显示当前的浏览器宽度。它在加载页面时工作得很好，但由于某些原因它没有在调整大小时更新，即使我似乎更新状态...帮助？

import React from "react";

class SmartBr extends React.Component {
  constructor() {
    super();
    this.state = {
      WindowWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      WindowHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
    };
  }

  updateDimensions() {
    this.setState = {
      WindowWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      WindowHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
    };
  }

  /**
   * Add event listener
   */
  componentDidMount() {
    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions.bind(this));
  }

  /**
   * Remove event listener
   */
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this));
  }

  render() {
    return <p>{this.state.WindowWidth}</p>;
  }
}

export default SmartBr;

Answer 1

构造函数之外的

setState是您调用的函数，而不是您设置的函数，因此您需要更改updateDimensions函数以调用setState方法，而不是像现在一样分配一个对象：）

updateDimensions() {
  this.setState({
    WindowWidth:
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth,
    WindowHeight:
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight
  });
}

React不会更新状态更改？

1 个答案: