React: 후크 : useState가 업데이트되지 않은 useContext

기능 을 요청하거나 버그를보고 하시겠습니까?

버그 인 것 같습니다. 😕

현재 행동은 무엇입니까?

중첩 컨텍스트 공급자와 useContext 후크가 충돌하는 것 같고 업데이트가 삭제됩니다.

예상되는 동작은 무엇입니까?

컨텍스트에 연결할 때 value 변경 될 때마다 업데이트해야합니다.

어떤 버전의 React와 어떤 브라우저 / OS가이 문제의 영향을 받습니까?

• 반응 : 18.8.0-alpha.1 ( 16.7.0-alpha.0 에서도 재현 됨)
• 브라우저 : chrome 71
• os : macOS Sierra

자세한 내용은

localStorage "연결"을 정리하는 동안
공식 반응 문서에서 2 개의 기사 ( [1] & [2] )를 혼합하려고 시도했지만 후크로 구현했지만 값이 전달되지 않는 것 같습니다.

codesandbox [3] 에 간소화 된 데모를

실제 구현은 몇 줄만 더 추가됩니다 (파싱하여 JSON으로 문자열 화).

내가 찾은 해결 방법 :

• setValue 함수 주위에 각 렌더링에 대해 새 함수를 만들면 실제로 작동합니다.
  
  
  
  • 그러나 이것은 새로운 가치 창출을 피하는 것에 대한 [1] 의 조언에 위배됩니다.
  
  
• 클래스로 마이그레이션하고 사용 componentDidUpdate 대신 useEffect .
  
  
  
  • 실제로 작동하는대로 지금 사용하고 있습니다. 상태의 함수에 대한 참조 저장 포함.
  
  

아래 코드에서 작동하지 않아야하는 것이 있습니까? 효과는 변경 사항으로 트리거됩니다.
그러나 값은 후크를 통해 소비하는 구성 요소에서 업데이트되지 않습니다. 재현 코드 참조 [3]

const createLocalStorage = key => {
    const initialValue = localStorage.getItem(key)
    const ValueContext = createContext(initialValue)
    const SetterContext = createContext(() => {})

    const useStorage = () => [ValueContext, SetterContext].map(useContext)

    const Provider = ({children}) => {
        const [value, setValue] = useState(initialValue)

        useEffect(
            () => {
                console.log('effect', value)
                localStorage.setItem(key, value)
            },
            [value],
        )

        return (
            <ValueContext.Provider value={value}>
                <SetterContext.Provider value={setValue}>
                    {children}
                </SetterContext.Provider>
            </ValueContext.Provider>
        )
    }

    return [Provider, useStorage]
}

[1] : https://reactjs.org/docs/hooks-faq.html#how -to-avoid-passing-callbacks-down
[2] : https://reactjs.org/docs/context.html#updating -context-from-a-nested-component
[3] : https://codesandbox.io/s/0yzjr8vnrv