React: Peringatan ketika komponen memo menggunakan hook dan suspense

Dibuat pada 7 Feb 2019 · 4Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?

Bug

Bagaimana perilaku saat ini?

Ada peringatan yang ditampilkan di konsol untuk komponen yang memenuhi semua kondisi berikut:

itu dikosongkan menggunakan React.memo
itu menggunakan kait
itu menggunakan ketegangan (ada janji yang dilemparkan).

Teks peringatan itu: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal dari masalah tersebut. Tempel tautan ke contoh JSFiddle (https://jsfiddle.net/Luktwrdm/) atau CodeSandbox (https://codesandbox.io/s/new) Anda di bawah ini:

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

Apa perilaku yang diharapkan?

Tidak ada peringatan yang harus ditampilkan karena aturan kait terpenuhi. Juga, perilaku harus konsisten tidak peduli apakah React.memo digunakan atau tidak.

Versi React mana, dan browser / OS mana yang terpengaruh oleh masalah ini?

Bereaksi 16.8.1

Hooks Bug

Sumber

trojanowski

👍3

Komentar yang paling membantu

Diperbaiki di 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon pada 14 Feb 2019

👍2

Semua 4 komentar

Bacaan pertama saya adalah ini bug.

gaearon pada 8 Feb 2019

Saya melihat masalah yang sama di versi 16.8.1 . Namun dalam kasus saya tidak ada komponen memo antara tempat Promise dilemparkan dan komponen Suspense .

Komponen mendeklarasikan dua kait di atas, sebelum Promise dilempar dan peringatan muncul. Saya memindahkan panggilan dengan melemparkan Promise di atas, sebelum kait dan hal yang sama terjadi. Peringatan menghilang jika tidak ada Promise dilempar ke dalam komponen.

Tiruan komponen saya adalah seperti:

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

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