Question

我正在从服务器发出的套接字事件中编写一个可观察的对象，但是我只是想不出办法改变它所观察到的变量，从而导致前端重新渲染

这是我的商店的样子

import { observable } from "mobx";
import io from "socket.io-client";

class SocketStore {

    @observable socket = null;

    constructor(socket) {
        this.socket = io("http://localhost:5000");
    }
}

export default new SocketStore();

。

    import { observable } from "mobx";
    import SocketStore from './SocketStore';

    class NameStore {

        @observable nameData = {};
        @observable state = "pending";

        retrieveData() {
            if (this.state === "pending") {
                SocketStore.socket.on('send data', this.processData);
            }
        }

        processData(data) {
            this.d = Date.now();
            this.nameData = data;
            this.state = "completed";

            console.log(this.nameData);
            console.log (String(Date

.now() - this.d) + " Seconds");
    }
}

export default new NameStore();

为什么我的UI无法重新渲染？

Answer 1

由于套接字的缘故，我不得不对它进行结构化。我需要使用@actions设置可观察的。是mobx的新功能，很抱歉出现菜鸟问题。

所以基本上看起来像这样

class NameStore {

    @observable nameData = {};
    @observable state = "pending";

    @action setClientData(nameInfo) {
        this.nameData = nameInfo;
    }

    @action setState(state) {
        this.state = state;
    }
}

Mobx反应可观察到的数据更改而不会重新呈现反应

1 个答案: