React wird bei Zustandsänderungen nicht aktualisiert?

Question

Ich versuche eine recht einfache Sache mit reagieren, nämlich eine Anzeige der aktuellen Browserbreite. Es funktioniert gut beim Laden der Seite, aber es aktualisiert sich nicht bei der Größenanpassung aus irgendeinem Grund, obwohl ich den Status zu aktualisieren scheint ... Hilfe?

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 außerhalb des Konstruktor ist eine Funktion, die Sie aufrufen, nicht ein Objekt, das Sie es festgelegt, so dass Sie Ihre updateDimensions Funktion ändern müssen die setState Methode aufzurufen, und nicht zuordnen Objekt wie Sie jetzt tun :)

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