Mobx观察者的更改不会触发下一个JS中的重发器

Question

我已经坚持了很长一段时间了，我不知道到底该怎么做。

我有两个组件

Navbar.tsx

​

import CoreButton from "../../core/CoreButton";
import {observer} from "mobx-react-lite";
import accountStore from "../../store/account.store";

function Navbar() {

    const onClick = () => {
        accountStore.login();
    }
    return (
        <header>

            <CoreButton
                onClick={onClick}>
                Do stuff
            </CoreButton>


        </header>
    )
}

export default observer(Navbar)

​

和一个Hero.tsx

​

import CoreButton from "../../core/CoreButton";
import {observer} from 'mobx-react-lite';
import accountStore from "../../store/account.store";
function Hero() {


    return (
        <section>

            <CoreButton>
                {accountStore.address}
            </CoreButton>

        </section>
    )
}

export default observer(Hero)

​

我有莫布克斯商店

​

import {configure, makeAutoObservable} from "mobx";

configure({
    enforceActions: 'never',
})

class AccountStore {
    address: string | undefined;
    isLoading: boolean = false;

    constructor() {
        makeAutoObservable(this);
    }

    login() {
        this.address = "Hello World";
    }

}

const accountStore = new AccountStore()
export default accountStore;

​

因此，当我在Navbar上点击“做事情”按钮时，我期待“英雄”中的文本发生变化。

但这不会发生的。我试着用redux工具箱来做这件事，它起了作用。mobx只是没有与下一个JS一起工作，还是我在这里遗漏了一些东西。

我不想在这里进行任何类型的数据获取，当用户与应用程序交互时，Mobx Store将被使用，并在刷新时被重置。

谢谢

Answer 1

那是因为

address: string | undefined;

由于某些原因，mobx不喜欢string | undefined，所以我将它改为

address: string = '';

而且起作用了！