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;
}

我猜这个问题与observable如何嵌套在我商店的对象中有关？我不知道。我发现掌握这种设置非常困难并且很难找到相关信息。对于mobx，react和mobx +这么多竞争对手的设置，大多数材料在最坏情况下都是错误的并且充其量是误导。

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

Answer 1

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

characters = observable.map<Character>()

请参阅https://mobx.js.org/refguide/map.html

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

为什么这个mobx-react观察者没有触发渲染？

1 个答案: