为什么这个 mobx-react 观察器不触发渲染?

Why isn't this mobx-react observer firing a render?

注意,我使用的是 Typescript。

在我的商店中,我指定了一个字段:

@observable public characters: {[name: string] : Types.Character} = {};

Types.Character定义为:

export class Character {
    name: string;
    gender: Gender;
    @observable status: Status;
    @observable statusmsg: string;
}

我有一个标记为观察者的 React 组件:

@observer
export default class NamePlate extends React.Component<INamePlateProps, {}> {

    render(){
        let char: Types.Character = chatStore.characters[this.props.characterName];

        let textStyle: Object = {
            color: Types.getGenderColourFromString(char.gender)
        };

        return <div className="comp-nameplate" title={char.statusmsg}>
            <img src={`images/status-small-${char.status}.png`}/>
            <span className="nameplatecharname" style={textStyle}>{char.name}</span>
        </div>;
    }

}

我正在更改 char.statusmg 和 char.status 属性,但观察者组件没有重新渲染。

private receiveSTA(obj: Packets.IReceivePacketSTA){
    let char: Types.Character = this.characters[obj.character];       
    char.status = Types.getStatusTypeFromString(obj.status);
    char.statusmsg = obj.statusmsg;
}

我猜问题出在如何将可观察对象嵌套在我商店中的对象中?我不知道。我发现掌握这种设置非常困难,而且很难找到相关信息。 mobx、react 和 mobx+react 的竞争设置如此之多,以至于大多数 material 在最坏的情况下是完全错误的,在最好的情况下是误导性的。

我正在使用最新版本的 Typescript、react、react-dom、mobx 和 mobx-react。

MobX 不支持动态添加/删除对象上的键。对于动态键控对象,应使用映射,因此:

characters = observable.map<Character>()

https://mobx.js.org/refguide/map.html


一般来说,任何不太反对的反应样板都适用于 mobx,因为添加到现有对象是微不足道的。所以我倾向于根本不使用任何样板,或者为了快速设置,create-react-app + react-app-rewired 来添加装饰器支持