recompose withState小道具の変更で更新する方法

私は少し修正しようとする上位コンポーネントがあります（私は再構成に慣れていません）。私は、マップコンポーネントを更新するかmycenterが更新された場合は再レンダリングしたいrecompose withState小道具の変更で更新する方法

<Map mycenter={mycenter} />

：

は、だから私のコンポーネントのthats。コードを変更しようとしています https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js

コードを少し修正しました。まず、マップセンターがmycenterに設定されます。それは動作します。

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

ユーザーがどこかをクリックすることができ、センターは

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

に変更されますその後、「mycenter」が更新された場合、コンポーネントの再レンダリングまたは中心が更新されるように方法はありますか？

出典

2017-10-23 MichaelRazum

古典的な状態管理の問題。 mobxやreduxなどのライブラリを使って調べてください。もう一つの解決策は、ロジックを状態ツリーの上に移動させて親ノードにすることです。子ノードが更新されると、子ノードが更新されます。 – archae0pteryx

@ archae0pteryxが言ったように、ローカル状態を作成するのではなく、グローバルストアでは親やイベントが通常この問題を解決し、より読みやすいコードを生成します。 – wuct

@ archae0pteryxはい私は私のアプリケーション全体でreduxを使用しています。 mycenterの状態はreduxから来ます。私は状態をマップコンポーネントに渡そうとしていますが、それを書き換えたくありません。私はそれが解決するだろうと思う。今私はクラスで働いているし、それらを還元するために接続しています。 HOCマップコンポーネントでそれを行う方法がわかりません。 – MichaelRazum

現在、ライフサイクルを使用するのが最善の方法です。初期状態（({ mycenter }) => ({ center:mycenter, zoom: 12 })）のコールバックは1回だけ発生します。

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 }}) 
    } 
    }) 
)

出典

2018-01-20 09:20:46

recompose withState小道具の変更で更新する方法

答えて

関連する問題