React: Ρ…ΡƒΠΊΠΈ: useContext с useState Π½Π΅ обновляСтся

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 26 янв. 2019  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: facebook/react

Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎΠ± ошибкС ?

каТСтся это ошибка . πŸ˜•

Каково Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅?

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ поставщик контСкста ΠΈ Ρ…ΡƒΠΊΠΈ useContext каТутся ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠΌΠΈ, обновлСния ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΡΡŽΡ‚ΡΡ.

КакоС оТидаСмоС повСдСниС?

ΠŸΡ€ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΊ контСксту ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒΡΡ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° измСняСтся value .

КакиС вСрсии React ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ / ОБ ΠΏΠΎΠ΄Π²Π΅Ρ€ΠΆΠ΅Π½Ρ‹ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅?

  • Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ : 18.8.0-alpha.1 (Ρ‚Π°ΠΊΠΆΠ΅ воспроизводится Π½Π° 16.7.0-alpha.0 )
  • Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ : chrome 71
  • ОБ : macOS Sierra

ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠŸΡ€ΠΈ очисткС "соСдинСния" localStorage,
Π― попытался ΡΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ 2 ΡΡ‚Π°Ρ‚ΡŒΠΈ ( [1] & [2] ) ΠΈΠ· ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ, я Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ…ΡƒΠΊΠΎΠ², Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚.

Π― размСстил ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π½Π° codeandbox [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-ΠΈΠ·Π±Π΅Π³Π°ΠΉΡ‚Π΅-ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ-ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹Ρ… Π²Ρ‹Π·ΠΎΠ²ΠΎΠ²-Π²Π½ΠΈΠ·
[2] : https://reactjs.org/docs/context.html#updating -context-from-a-nested-component
[3] : https://codesandbox.io/s/0yzjr8vnrv


hlcecpq

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― размСстил ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π½Π° codeandbox [3].

МнС каТСтся, Ρ‡Ρ‚ΠΎ ваши Π²Ρ‹Π·ΠΎΠ²Ρ‹ useContext находятся Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΈ Provider . Π’ этом смыслС ΠΎΠ½ΠΈ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ контСкст Π½Π°Π΄ поставщиком (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π° влияСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° контСкст для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.

ΠšΡΡ‚Π°Ρ‚ΠΈ, Ссли Π±Ρ‹ Π²Ρ‹ Π½Π΅ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΎΠ±ΠΌΠ°Π½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ…ΡƒΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ΄Π° Ρ‚ΠΈΠΏΠ° [A, B].map(useContext) Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ это Ρ€Π°Π½ΡŒΡˆΠ΅ ;-)

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― размСстил ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π½Π° codeandbox [3].

МнС каТСтся, Ρ‡Ρ‚ΠΎ ваши Π²Ρ‹Π·ΠΎΠ²Ρ‹ useContext находятся Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΈ Provider . Π’ этом смыслС ΠΎΠ½ΠΈ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ контСкст Π½Π°Π΄ поставщиком (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π° влияСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° контСкст для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.

ΠšΡΡ‚Π°Ρ‚ΠΈ, Ссли Π±Ρ‹ Π²Ρ‹ Π½Π΅ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΎΠ±ΠΌΠ°Π½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ…ΡƒΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ΄Π° Ρ‚ΠΈΠΏΠ° [A, B].map(useContext) Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ это Ρ€Π°Π½ΡŒΡˆΠ΅ ;-)

ΠΏΡ€ΠΈΠ²Π΅Ρ‚ Дэн! спасибо Π·Π° быстрый ΠΎΡ‚Π²Π΅Ρ‚ (: Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ исправил.

ΠšΡΡ‚Π°Ρ‚ΠΈ: useContext (Ρ‡Π΅Ρ€Π΅Π· useStorage ) находится Π²Π½ΡƒΡ‚Ρ€ΠΈ App , Ρ‡Ρ‚ΠΎ _is_ Π²Π½ΡƒΡ‚Ρ€ΠΈ Provider Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ReactDOM.render . (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, я сдСлал ΠΏΡ€ΠΈΠΌΠ΅Ρ€ слишком ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅).


Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ :

Π― просто Ρ€Π΅ΡˆΠΈΠ» это, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² эту ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΡƒΡŽ строку .map : я пропустил ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ observedBits , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² ΠΈΡ‚ΠΎΠ³Π΅ Π±Ρ‹Π» ΠΏΠ΅Ρ€Π΅Π΄Π°Π½, я Ρ‡ΠΈΡ‚Π°Π» ΠΎΠ± этом здСсь Π² Issues / PR, Π½ΠΎ Π·Π°Π±Ρ‹Π» ΠΎΠ± этом ΠΏΡ€ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ испортил ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

Ааа, Ρ‚Ρ‹ ΠΏΡ€Π°Π², я Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ понял Ρ‚Π²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π”Π° observedBits здСсь ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. ΠŸΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π»ΠΎΠ²ΡƒΡˆΠΊΡƒ, Π½ΠΎ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ useContext динамичСски, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ..

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ вопросы

krave1986 picture krave1986  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

varghesep picture varghesep  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

bloodyowl picture bloodyowl  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

tleunen picture tleunen  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

hnordt picture hnordt  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ