Почему этот наблюдатель mobx-react не запускает рендеринг?

Обратите внимание: я использую 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.


person Strawberry Bunny    schedule 30.03.2017    source источник


Ответы (1)


MobX не поддерживает динамическое добавление / удаление ключей на объектах. Для объектов с динамическими ключами следует использовать карты, поэтому:

characters = observable.map<Character>()

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


В общем, любой не слишком популярный шаблон реагирования работает для mobx, поскольку его тривиально добавить к существующему объекту. Поэтому я обычно не использую никаких шаблонов или, для быстрой настройки, create-react-app + react-app-rewired, чтобы добавить поддержку декоратора.

person mweststrate    schedule 30.03.2017
comment
Не совсем уверен, что это моя проблема. По крайней мере, пока нет. Я не использую наблюдаемое для общедоступных символов: {[name: string]: Types.Character} = {}; пока что, но в нем содержится элемент «Персонаж», за которым я хочу наблюдать. Это имеет значение? - person Strawberry Bunny; 30.03.2017
comment
В этом случае все должно быть в порядке, если char доступен при первом рендеринге NamePlate, он должен начаться после изменений в статусе и статусе msg. - person mweststrate; 30.03.2017
comment
Что ж, кажется, что нет, но вы правы. Я еще не совсем понимаю observable.map ‹Character› (), поэтому я быстро добавил нормальный массив машинописного текста и сделал его наблюдаемым, и изменения сработали. Я изучу наблюдаемые карты mobx подробнее. Спасибо за помощь. - person Strawberry Bunny; 30.03.2017