reconpose withState, wie man auf Requisitenänderungen aktualisiert

Ich habe eine Komponente höherer Ordnung, die ich versuche, ein bisschen zu modifizieren (ich bin nicht vertraut mit Neuzusammensetzen).reconpose withState, wie man auf Requisitenänderungen aktualisiert

Also das ist meine Komponente:

<Map mycenter={mycenter} />

ich die Karte-Komponente aktualisieren möchten oder erneut gerendert, wenn der MyCenter aktualisiert wird. Ich versuche, den Code von https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js

zu ändern Ich habe einige Änderungen an den Code vorgenommen. Zuerst wird das Kartencenter auf mycenter gesetzt. Das funktioniert.

withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center:mycenter, zoom: 12 })),

dass Nachdem der Benutzer kann irgendwo klicken und das Zentrum wird

withHandlers({ 
    onMapParamsChange: ({ setMapParams }) => ({ center, zoom, bounds }) => { 
     setMapParams({ center, zoom, bounds }); 
     console.log('setMapParams', { center, zoom }); 
    },

ein Weg Gibt es so modifiziert werden, dass die Komponente rerenders oder das Zentrum aktualisiert wird, wenn „MyCenter“ aktualisiert wird?

Quelle

2017-10-23 MichaelRazum

Ein klassisches Zustandsverwaltungsproblem. Untersuchen Sie eine Bibliothek wie Mobx oder Redux. Eine andere Lösung wäre, die Logik in den Zustandsbaum auf einen Elternbaum zu verschieben, so dass sie nach dem Auslösen die Kinder aktualisiert. (Mache ich einen Sinn?) – archae0pteryx

Wie @ archae0pteryx sagte, anstatt einen lokalen Zustand zu erstellen, hob den Zustand auf ein Elternteil oder Ereignis ein globales Geschäft wird normalerweise dieses Problem lösen und mehr lesbaren Code produzieren. – wuct

@ archae0pteryx Ja, ich verwende Redux in meiner ganzen Anwendung. Der Mycenter-Zustand kommt von redux. Ich versuche, den Status an die Kartenkomponente zu übergeben, möchte sie aber nicht neu schreiben. Ich denke, das würde das lösen. Im Moment arbeite ich mit Klassen und verbinde sie mit redux. Nicht sicher, wie man es mit der HOC-Map-Komponente macht. – MichaelRazum

Derzeit ist der beste Weg, Lebenszyklus zu verwenden. der Rückruf des Ausgangszustandes (({ mycenter }) => ({ center:mycenter, zoom: 12 })) passiert nur einmal.

const enhanceMap = compose(
    withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center: mycenter, zoom: 12 })), 
    withStateHandlers({...}), 
    lifecycle({ 
    componentWillReceiveProps(nextProps) { 
     if (this.props.mycenter !== nextProps.mycenter) 
     this.setState({mapParams: { center: nextProps.mycenter, zoom: 12 }}) 
    } 
    }) 
)

Quelle

2018-01-20 09:20:46

reconpose withState, wie man auf Requisitenänderungen aktualisiert

Antwort

Verwandte Themen