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

Question

请注意，我使用的是 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。

Answer 1

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

characters = observable.map<Character>()

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

---

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