Can't update array value programatically?

derosullast year

8

{
  name: 'tickers',
  type: 'array',
  fields: [
    {
      name: 'symbol',
      type: 'text'
    }
  ],
}

const myField = useField({ path: 'tickers' });
myField.setValue([ { symbol: 'test' } ]);

const [ allFields, dispatchFields ] = useAllFormFields();
dispatchFields({ type: 'UPDATE', path: 'tickers', value: [{ symbol: 'test' }] })

• 

  jmikrut

  last year

  nice

  
  

  
  

  will cross-post my answer here:

  
  

  
  

  one note, we are about to release changes that make it a LOT easier to programmatically update arrays

  
  

  but in the meantime, i wrote up an example for how to do it here:

  
  https://github.com/payloadcms/payload/issues/2427#issuecomment-1512320542
• 

  derosullast year

  Ah, in the meantime I'll try that! thanks @jmikrut 🙂

• 

  jmikrut

  last year

  of course! and keep an eye out, lots of new arary stuff coming soon

• 

  derosullast year

  Sweet! can't wait

• 

  johnrisby12 months ago

  @jmikrut has the new array stuff been released yet? I've been doing a lot of work with arrays over the last day or so, and I've not come across anything yet so it's been a bit of a pain tbh 😉 thanks

• 

  jmikrut

  12 months ago

  @jarrod_not_jared

  
  

  
  

  yes, the new array stuff has been released and is documented

  
  

  
  

  https://payloadcms.com/docs/admin/hooks#useform
  

  
  

  check the

  addFieldRow

  ,

  removeFieldRow

  , and

  replaceFieldRow

  methods

  
  

  
  

  they have examples as well

• 

  jarrod_not_jared

  12 months ago

  And if anything is unclear let us know and we can add other examples 👍

• 

  johnrisby12 months ago

  ah thanks Jarrod, yes, I have seen them, I wasn't sure it was something else though. I used removeFieldRow yesterday to remove an item from an array. I do have a remaining problem (after an item is removed from the array, some of my code is updating the wrong index) but I think that's my fault in terms of setting up useField hooks with the old path names (ie. item.2...) and then not updating them with the indexes change.... I'll shout if I'm totally stuck though! thanks!

  
  

  
  

  ok, I've managed to make a lot of progress on this now. I've replaced two uses of useAllFormFields which were bugging me - and also fixed the problem I mentioned above - but I did hit a problem with replaceFieldRow.Also to do with indexes but not connected.

  
  
  

  This is probably totally my fault but it took a while to work out what (I think) is going on and maybe explaining it could help someone else.

  
  
  

  I was iterating through an array of items, amending them, and then replacing that row with the amended data. But I was doing this in a loop, and it was causing strange things to happen (to be more accurate, it seemed to lose the first item in the array, ie it moved 1 to 0, 2 to 1, 3 to 2, 4 to 3, and left 4 in at 4 as well - so I lost the first item, and the last was duplicated). I noticed it was also changing the IDs of the items even though I was "replacing" it with the same field data with the existing ID.

  
  
  

  In the end I realised this was probably the problem and decided to stop replacing the rows during the loop and instead replace the entire array at the end by using UPDATE on dispatchFields from useForm. That works as I'd expect it to.

  
  
  

  This means I've also managed to get rid of a recursive function I wrote to set all the fields individually which I didn't like but seemed necessary yesterday.

  
  
  

  Am I right in thinking the use of replaceFieldRow in the loop was causing this problem with the lost item, possibly due to the order of the items being changed when the row is replaced? And is this something I should have realised? 😉 Maybe it's something that could be noted in the docs (unless I'm the only person who would make this mistake!) Thanks!