Question

我正在使用react-google-maps绘制一条折线，该折线绑定到mobx可观察的数组。如果我在加载页面时设置值，则此方法有效。但是，当我更新折线值（路线）时，图形不会更新。我认为问题与mobx有关，但不确定。我发现了这个Mobx Observable Array not updated，但没有成功。还有其他想法吗？

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());

MobX不基于数组数据更新视图

0 个答案: