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

iamprompt2 years ago

16

const [fields, dispatchField] = useAllFormFields()

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

[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')

• 

  jacobsfletch

  2 years ago

  @434737607742586880

  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
• 

  iamprompt2 years ago

  @808734492645785600

  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.
• 

  jmikrut

  2 years ago

  @434737607742586880

  yes, to add a row to an array you also need to update that array field's internal row state.

  @364562745447940099

  I think we should write a blog post about how to do this

• 

  iamprompt2 years ago

  @364124941832159242

  is there a quick solution how to do this?

• 

  jessrynkar2 years ago

  @364124941832159242

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

• 

  jmikrut

  2 years ago

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

• 

  iamprompt2 years ago

  Any idea about this??

• 

  webcredo2 years ago

  @364124941832159242

  any info on how to deal with this?

• 

  jmikrut

  2 years ago

  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

• 

  webcredo2 years ago

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

• 

  grandnainconnu2 years ago

  Any update on this?

• 

  jmikrut

  2 years 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

• 

  grandnainconnu2 years ago

  Thank you!

• 

  showering_complimentslast year

  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?

• 

  grandnainconnulast year

  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

  .

• 

  jmikrut

  last year

  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