MobX не обновляет представление на основе данных массива - PullRequest
Новая
       30

MobX не обновляет представление на основе данных массива

2 голосов
/ 21 сентября 2019

Я использую реагирующее-гугл-карты, чтобы нарисовать ломаную линию, которая связана с наблюдаемым массивом mobx.Это работает, если я устанавливаю значения при загрузке страницы.Но когда я обновляю значение полилинии (маршрут), график не обновляется.Я думаю, что проблема связана с MOBX не уверен, хотя.Я обнаружил, что Mobx Observable Array не обновляется , но безуспешно.Любые другие идеи?

  1. Неполные части из файла main.tsx, чтобы дать некоторые идеи о структуре ... 

    export const Main = observer(() => {
         const mainState = useContext(MainState);

         const MapWithARoute = withScriptjs(
        withGoogleMap((props) => (
            <GoogleMap defaultZoom={12} defaultCenter={mainState.center}>
                <Polyline
                    path={mainState.route}
                    options={{
                        strokeColor: '#FF0000',
                        strokeOpacity: 1,
                        strokeWeight: 6,
                        icons: [
                            {
                                offset: '0',
                                repeat: '10px'
                            }
                        ]
                    }}
                />              
            </GoogleMap>
        ))
    );
    }

return (
        <MapWithARoute
                 googleMapURL="https://maps.googleapis.com/maps/api/js? 
                key=mykey&v=3.exp&libraries=geometry,drawing,places"
                        loadingElement={<div style={{ height: `100%` }} />}
                        containerElement={<div style={{ height: `400px` }} />}
                        mapElement={<div style={{ height: `100%` }} />}
                    />
);

Внутри MainState.tsx 

import { createContext } from 'react';
import { decorate, observable } from 'mobx';

export class MainState {        
    route: any = [];
    center: any = { lat: 59.95, lng: 30.33 };
}

decorate(MainState, {
    route: observable,
    center: observable
});

export default createContext(new MainState());
...