Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.71k stars 1.17k forks source link

ResourceList throws error if `items` change #12299

Open JuanCaicedo opened 1 week ago

JuanCaicedo commented 1 week ago

Summary

Hi! I'm trying to render a ResourceList in a view where a merchant can add a new resource. I'm currently letting them add a new resource with an app-bridge modal

When I add a new item and the items array changes, I get the following error Error: Rendered more hooks than during the previous render.

I get the impression that ResouceList can't respond to changes in that array.

Here's the full stack in case it's relevant.

Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (https://testify-kz--development.gadget.app/node_modules/.vite/deps/chunk-BUQ3EWXL.js?v=d32404f8:11698:21)
    at updateRef (https://testify-kz--development.gadget.app/node_modules/.vite/deps/chunk-BUQ3EWXL.js?v=d32404f8:12084:22)
    at Object.useRef (https://testify-kz--development.gadget.app/node_modules/.vite/deps/chunk-BUQ3EWXL.js?v=d32404f8:12765:22)
    at Object.useRef (https://testify-kz--development.gadget.app/node_modules/.vite/deps/chunk-2UC5YKPU.js?v=d32404f8:1074:29)
    at useNavigateStable (https://testify-kz--development.gadget.app/node_modules/.vite/deps/react-router-dom.js?v=d32404f8:3565:25)
    at useNavigate (https://testify-kz--development.gadget.app/node_modules/.vite/deps/react-router-dom.js?v=d32404f8:3102:24)
    at VariantResourceItem (https://testify-kz--development.gadget.app/web/components/variants/index.jsx?t=1719161996413:20:22)
    at renderItemWithId (https://testify-kz--development.gadget.app/node_modules/.vite/deps/@shopify_polaris.js?v=d32404f8:28995:25)
    at _GadgetRecordList.map (<anonymous>)
    at ResourceList (https://testify-kz--development.gadget.app/node_modules/.vite/deps/@shopify_polaris.js?v=d32404f8:29164:61)

Expected behavior

I would expect this component to be able to update if more or less items are push to it

Actual behavior

A react hooks error is thrown

Steps to reproduce

No response

Are you using React components?

Yes

Polaris version number

No response

Browser

chrome 126.0.6478.62

Device

macOS 14.4.1 (23E224)

JuanCaicedo commented 1 week ago

I think it's likely that this is because I'm creating the new item in a modal. I'm going to move towards creating items in on a new page, but it seems like this issue could occur in other scenarios as well