recompose withState 소품 변경시 업데이트하는 방법

조금 수정하려고하는 상위 컴포넌트가 있습니다 (재구성에 익숙하지 않습니다). 내가지도 - 구성 요소를 업데이트하거나 mycenter가 업데이트되면 다시 렌더링 할recompose withState 소품 변경시 업데이트하는 방법

<Map mycenter={mycenter} />

그래서 내 구성 요소를 이잖아. 코드를 수정하려고합니다. 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"가 업데이트되면 구성 요소 rerenders 또는 중심이 업데이트되도록 방법이 있나요

을 수정할 수 있습니까?

출처

2017-10-23 MichaelRazum

전형적인 상태 관리 문제입니다. mobx 또는 redux와 같은 라이브러리를 사용하십시오. 또 다른 해결책은 상태 트리 위로 부모를 이동 시켜서 트리거 할 때 자식을 업데이트하도록하는 것입니다. (의미가 있습니까?) – archae0pteryx

@ archae0pteryx가 말한 것과 마찬가지로 로컬 상태를 만드는 대신 상태를 부모 나 이벤트는 일반적으로이 문제를 해결하고 더 읽기 쉬운 코드를 생성합니다. – wuct

@ archae0pteryx 예 전 응용 프로그램에서 redux를 사용하고 있습니다. mycenter 상태는 redux에서 비롯됩니다. 임 상태를지도 구성 요소로 전달하려고 시도했지만 다시 작성하지 않으려합니다. 나는 그것을 해결할 것 같아요. 지금 나는 수업과 함께 일하고 있고 그들을 redux에 연결합니다. HOC 맵 구성 요소로이를 수행하는 방법을 모릅니다. – MichaelRazum

현재 가장 좋은 방법은 수명주기를 사용하는 것입니다. 초기 상태 (({ mycenter }) => ({ center:mycenter, zoom: 12 }))의 콜백은 한 번 발생합니다.

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 소품 변경시 업데이트하는 방법

답변

관련 문제