React 中的 Mobx 存储不会重新渲染组件

Question

我正在尝试了解 mobx。在注解造成了很多麻烦之后，我决定使用 here 中描述的全局存储。我的商店是这样的：

import {
    makeObservable,
    observable,
    action
} from "mobx";

class Store {
    constructor() {
        makeObservable(this, {
            fetchWorkouts: action,
            user: observable,
            allWorkouts: observable,
            selectedWorkout: observable,
            currentStep: observable,
            setUser: action
        })
    }

    user = {
        uid: null,
        email: null,
        name: null
    }

    allWorkouts = []

    selectedWorkout = {}

    currentStep = 0

    fetchWorkouts() {

    }

    setUser(newUser) {
        this.user = newUser;
    }

}

const store = new Store()

export default store;

我的新用户直接来自登录，看起来像这样：

import {Button} from "semantic-ui-react";
import {useHistory} from "react-router-dom"
import React from 'react';

import store from "../../context/Store";
import {toJS} from "mobx";

export default function SubmitLogin(props) {
    let history = useHistory();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const loginUser = async () => {
        let bodyObj = {
            email: props.email,
            pw: props.password
        }
        let queryString = "http://localhost:3001/user/login/" + bodyObj.email + "/" + bodyObj.pw;
        await fetch(queryString).then(response => response.json()).then(json => store.setUser(json)).then(() => console.log(toJS(store.user))).then(() => history.push("/"));
    }

    return (
        <>
            <Button className={"loginRegisterButton"} onClick={loginUser}>Submit</Button>
        </>
    )
}

为了测试所有内容，我试图在我的 header 中显示 uid，如下所示：

import React, {Component} from 'react';
import {Link} from "react-router-dom";

import store from "../context/Store";

class Toolbar extends Component {
    render() {
        return (
            <div id={"toolbarDiv"}>
                <p style={{color: "white"}}>{store.user.uid}</p>
            </div>
        );
    }
}

export default Toolbar

但是，即使在我从我的服务器收到 uid 并可以在我的登录组件中打印它之后，我仍假设数据已正确分配给商店中的用户变量。不幸的是，在按下登录按钮并重定向到“/”后，工具栏中没有任何内容。如何正确访问变量？

Answer 1

我认为您仍然需要将 Toolbar 和 SubmitLogin 包装在 observer 调用中：

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import { observer } from "react-mobx";

import store from "../context/Store";

class Toolbar extends Component {
    render() {
        return (
            <div id={"toolbarDiv"}>
                <p style={{color: "white"}}>{store.user.uid}</p>
            </div>
        );
    }
}

export default observer(Toolbar);

参考：https://mobx.js.org/react-integration.html

React 中的 Mobx 存储不会重新渲染组件

Mobx store in react doesn't rerender components

javascript

node.js

reactjs

state

mobx