#Unable to update `appstate.data` via dispatch with custom data.

1 messages · Page 1 of 1 (latest)

umbral oasis
#

I am trying to update the puck state via json 👇.
Every key and id is unique(uinqueId values are uniquely generated while preparing the json).

This is how i am updating the state it dispatch({ type: "setData", data: newData })

{
  "zones": {},
  "root": { "props": { "title": "Some site" } },
  "content": [
    {
      "type": "body", "key": "uniqueId", "id": "uniqueId", "props": {
        "data-template": "true",
        "items": [
          {
            "type": "div", "key": "uniqueId", "id": "uniqueId", "props": {
              "items": [
                {
                  "type": "h1", "key": "uniqueId", "id": "uniqueId", "props": {
                    "items": [{
                      "type": "textString",
                      "props": { "id": "uniqueId", "children": "Example Domain" }
                    }]
                  }
                },
                {
                  "type": "p", "key": "uniqueId", "id": "uniqueId", "props": { 
                    "items": [{
                      "type": "textString",
                      "props": { "id": "uniqueId", "children": "Some Text" }
                    }]
                  }
                },
                {
                  "type": "p", "key": "uniqueId", "id": "uniqueId", "props": {
                    "items": [
                      {
                        "type": "a", "key": "uniqueId", "id": "uniqueId", "props": {
                          "href": "https://www.iana.org/domains/example",
                          "items": [
                            {
                              "type": "textString", "key": "uniqueId", "id": "uniqueId",
                              "props": { "id": "uniqueId", "children": "More information..." }
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
#

I have my puck configalready populated with proper components, categories.

#

Fr sm reason i am unable to upload screenshot. So here's the console logs that i am seeing right after the operation and the *app freezes * 🥶 🫠.

1. `setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead.

2. `custom-log`: confirms that the `appState.data` still shows previous `data` before the dispatch.

3. index.tsx:519 Each child in a list should have a unique "key" prop. Check the render method of `ForwardRef(DropZoneEditInternal)`. See https://react.dev/link/warning-keys for more information.
ancient depot
#

Hey @umbral oasis!

Thanks for reporting this. Without seeing exactly how your config looks, it’s a bit tricky to know for sure what’s happening.
But from the looks of it, some of your unique ids might be duplicated.

Just for the record, I don’t think we use a "key" property in the Puck data.

I'd try and check that your unique id generation is actually kicking in as expected.

umbral oasis
#

I am doing it dynamically, so i dont think it should ever be duplicate.
Here's my generateId function used to create the IDs

import { v4 as uuidv4 } from "uuid";

export const generateId = (type?: string | number) =>
  type ? `${type}-${uuidv4()}` : uuidv4();

// usage
generateId("key")  // used in key
generateId("id")  // used in id
midnight blaze
#

hi @umbral oasis key id should be inside of props. it should be like this

props: {
  id: "randomUUID"
}