2

注意，我使用的是打字稿。

在我的商店中，我指定了一个字段：

@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 的竞争设置如此之多，以至于大多数材料在最坏的情况下是完全错误的，在最好的情况下是误导性的。

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

4

1 回答 1

1

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

characters = observable.map<Character>()

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

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

于 2017-03-30T10:17:47.727 回答