problem with dispatchField - ADD_ROW doesn't show up and cause error when saving

default discord avatar
iampromptlast year
16

I have a problem recently that I try to use dispatchField with the type

ADD_ROW

but when the function is execute,



const [fields, dispatchField] = useAllFormFields()

dispatchField({
  type: 'ADD_ROW',
  path: '__path__',
  rowIndex: 0,
  subFieldState: {
    provider: {
      initialValue: '',
      value: __value__,
      valid: true,
    },
  },
})


I think the state has been updated but there is no row being add on the dash board and also cause an error on saving draft or publishing.



[10:43:44] ERROR (payload): There was an error while creating a draft [object Object] with ID xxxxxxx.
[10:43:44] ERROR (payload): _shows_versions validation failed: version.__path__: Cast to embedded failed for value "1" (type number) at path "__path__" because of "ObjectParameterError"
[10:43:44] ERROR (payload): TypeError: Cannot read properties of undefined (reading 'version')


The workaround I do now is to manually add the row and then deleted the manually created one before saving which I think it is the additional task.



I don't know if there are any solution to solve this bug?

  • discord user avatar
    jacobsfletch
    last year

    @iamprompt try to use the

    useFormFields

    hook instead, it's much more performant and might easier to work with.

    const { value } = useFormFields(([fields, dispatch]) => fields[path])


    Here's some related docs, too:

    https://payloadcms.com/docs/admin/hooks#useformfields
  • default discord avatar
    iampromptlast year

    @jacobsfletch I think, to get the value is fine but the way to dispatch or create a row in an array in programming way is the real problem. I'm not sure that there might be some different in

    dispatch

    function or not by using

    useFormFields

    .


    I have a few fields to change, I call dispatchField once at a time, everything fine, but the array one causing an error.



    As I saw in Array field-types

    https://github.com/payloadcms/payload/blob/master/src/admin/components/forms/field-types/Array/index.tsx#L102

    when adding row in the array, there is a call to

    dispatchRows

    immediately after

    dispatchFields

    execute. I'm not sure whether

    dispatchRows

    is a thing, if so I have tried to find the way to access it but not successful as it might depending on its own fields. What I call is from other fields to set the value.

    image.png
  • discord user avatar
    jmikrut
    last year

    @iamprompt yes, to add a row to an array you also need to update that array field's internal row state. @seanzubrickas I think we should write a blog post about how to do this

  • default discord avatar
    iampromptlast year

    @jmikrut is there a quick solution how to do this?

  • discord user avatar
    jesschow
    last year

    @jmikrut how do we update the array field's internal row state?

  • discord user avatar
    jmikrut
    last year

    we could certainly build a utility to make this easier but right now it would take some manual work

  • default discord avatar
    iampromptlast year

    Any idea about this??

  • default discord avatar
    webcredolast year

    @jmikrut any info on how to deal with this?

  • discord user avatar
    jmikrut
    last year

    not yet - but we can write something up soon. in the meantime, i'd say you should look at our internal Array field for some ideas. There are two states that need to be kept up to date - the

    rows

    reducer, and then of course your fields themselves

  • default discord avatar
    webcredolast year

    Hope you will do something soon with this. I think it should be made easy to use.

  • default discord avatar
    grandnainconnu11 months ago

    Any update on this?

  • discord user avatar
    jmikrut
    11 months ago

    actually, yes, I have written up a response to someone else about how to update array fields:



    https://github.com/payloadcms/payload/issues/2427


    their original issue deals with nested arrays, so my example is more complex, but this should give you an idea

  • default discord avatar
    grandnainconnu11 months ago

    Thank you!

  • default discord avatar
    showering_compliments9 months ago

    I am following a similar approach of using

    replaceState

    . I have been able to make it work in payload versions 1.9.0 & below. The UI adds the blocks/array items seamlessly.


    I upgraded it to version 1.10.0 today, and it seems to be breaking (Not sure which version has introduced this).



    On 1.10.0, after calling

    replaceState

    , the UI is not updating. I can see the updated data within the fields if I console it in

    useFormFields

    .


    If I save the collection after

    replaceState

    the document re-renders and the elements which were added become visible.



    Any idea how to fix this?

  • default discord avatar
    grandnainconnu9 months ago

    I got the same thing but instead of not showing the updated version it simply makes the field disappear. After saving, the field appears again, filled with the data contained in the

    replaceState

    .

  • discord user avatar
    jmikrut
    9 months ago

    Hey all, I just commented on the issue above



    with some tips on how to update arrays / blocks



    happy to help if the comment on the issue above doesn't make sense

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.