Warum gibt React meinen Komponentenstatus nicht korrekt wieder?

Ich habe dies sowohl mit einer Klassenkomponente versucht:

class Foo extends React.Component {
    x = 3;
    componentDidMount () {
        fetch(apiURL).then(() => {
            x = 5;                
        });
    }

    render () {  
        return <div>{x}</div>;
    }
}

und mit einer Funktionskomponente:

let x = 3;
fetch(apiURL).then(() => {
    x = 5;                
});

const Foo = () => <div>{x}</div>;

Und der auf der Seite angezeigte Wert von x ändert sich nie oder scheint sich zufällig zu ändern. Was gibt?

React weiß nur, dass es neu rendern muss, wenn Sie ihm mitteilen, dass sich etwas geändert hat, indem es die Funktionen verwendet, die es für die Zustandsverwaltung bereitstellt:

class Foo extends React.Component {
    // In class components state must be an object
    state = {
        x: 3,
    };
    componentDidMount () {
        fetch(apiURL).then(() => {
            // Note that we change state with the setState method.
            this.setState({ x: 5 });               
        });
    }

    render () {
        return <div>{this.state.x}</div>;
    }
}

zusätzlich Funktionskomponenten sein sollten rein (keine Nebenwirkungen), um sie zu aktualisieren, gibt uns React Hooks:

const Foo = () => {
    const [x, setX] = useState(3);
    useEffect(() => {
        fetch(apiURL).then(() => {
            // We use the setter returned from useState.
            setX(5);               
        });
    }, []);

    return <div>{x}</div>;
}

Sie können also nicht einfach einer Variablen zuweisen und erwarten, dass React dies weiß: Sie müssen seine Aktualisierungsfunktionen verwenden, damit es weiß, dass es diese Daten erneut auf der Seite rendern muss.