Invalid Hook Call Warning: Rules of hooks broken when multiples React instances rendered
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 11.8k
- Fork
- 7.9k
- Merge trung bình
- 1 ngày 11 giờ
- Pull request đã merge (30 ngày)
- 11
Mô tả
At the very bottom of "Invalid Hook Call Warning" page (https://reactjs.org/warnings/invalid-hook-call-warning.html) it says the following:
Note
In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if require('react') resolves differently between the component and the react-dom copy it was rendered with.
However it has no explanation on how to ensure there is no collision between multiple React instances.
I am building an embeddable React widgets and very recently I matched the following error:
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.xo (embed.js:formatted:4213)
at exports.useMemo (embed.js:formatted:487)
at StarRating (ComponentName.88cd42c6.js:8)
at _o (embed.js:12)
at hi (embed.js:12)
at Gi (embed.js:12)
at Yi (embed.js:12)
at Ki (embed.js:12)
at Vi (embed.js:12)
at embed.js:12
Which decodes to the following error message:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
After some analysis, 1) is not true, both react and react-dom are matching, 2) rules of hooks are not broken (useMemo() at the very top of functional component), 3) most likely related to it.
The third point I can't control, because website can have various React widgets on the same page which developed by other companies.
I check the following thread but it didn't help me. And it seems to be an issue for some users as well.
What to do in this case?
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với trang Invalid Hook Call Warning và xem lại issue #13991 được liên kết để tìm phần hướng dẫn còn thiếu. Ghi lại cách các widget có thể nhúng tránh xung đột giữa nhiều instance React, sử dụng kịch bản lỗi được báo cáo làm bối cảnh. Hoàn thành khi trang giải thích các cách thực tế để chẩn đoán và ngăn chặn xung đột này.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, react
- Lĩnh vực
- documentation
- Loại issue
- Tài liệu
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100