React: ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅ΠΌΠΎΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈ Ρ…ΡƒΠΊΠΈ, ΠΈ саспСнс

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 7 Ρ„Π΅Π²Ρ€. 2019  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: facebook/react

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

Ошибка

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

Π’ консоли отобраТаСтся ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ всС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ условия:

  • ΠΎΠ½ запоминаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React.memo
  • ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΡ€ΡŽΡ‡ΠΊΠΈ
  • ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π΅ΠΈΠ·Π²Π΅ΡΡ‚Π½ΠΎΡΡ‚ΡŒ (бросаСтся ΠΎΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅).

ВСкст этого прСдупрСТдСния: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

Если Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ являСтся ошибкой, поТалуйста, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ шаги для воспроизвСдСния ΠΈ, Ссли Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ссылку Π² свой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ JSFiddle (https://jsfiddle.net/Luktwrdm/) ΠΈΠ»ΠΈ CodeSandbox (https://codesandbox.io/s/new) Π½ΠΈΠΆΠ΅:

https://codesandbox.io/s/71lr16j491

КакоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ оТидаСтся?

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ слСдуСт, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡΠΎΠ±Π»ΡŽΠ΄Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Π°. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ согласованным нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π»ΠΈ React.memo ΠΈΠ»ΠΈ Π½Π΅Ρ‚.

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

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 16.8.1

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

Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π² 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

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

МоС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ - это ошибка.

Π― Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ» Ρ‚Ρƒ ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π² вСрсии 16.8.1 . Однако Π½Π΅ Π² ΠΌΠΎΠ΅ΠΌ случаС Ρ‚Π°ΠΌ Π½Π΅Ρ‚ memoized ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ мСстом , Π³Π΄Π΅ Promise ΠΎΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈ Suspense ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΎΠ±ΡŠΡΠ²Π»ΡΠ΅Ρ‚ Π΄Π²Π° ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Π° свСрху Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€ΠΎΡˆΠ΅Π½ΠΎ Promise ΠΈ появится ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅. Π― пСрСмСстил Π²Ρ‹Π·ΠΎΠ², бросив Promise свСрху, Π΄ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Π°, ΠΈ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС. ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ исчСзаСт, Ссли Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ Π½Π΅ Π±Ρ‹Π»ΠΎ Π²Ρ‹Π±Ρ€ΠΎΡˆΠ΅Π½ΠΎ Promise .

ΠœΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° выглядит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

ΠœΠΎΠ³Ρƒ это ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ.

Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π² 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

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

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

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

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

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

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

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