Обратите внимание: я использую Typescript.
В моем магазине у меня есть поле, указанное так:
@observable public characters: {[name: string] : 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.