Custom component - replace array field values

[lorenzowijtman]

I might be missing something obvious but I am unable to replace/ update the value of a collection field with my custom component. The field is of the type array and stores an array of objects, which works well when creating the parent collection entry. However, when trying to update the value after creation, only the objects that exceed the length of the current array are added. So when creating the entry with an array of 10 objects, and trying to update the values afterwards with an array of 20 objects, only the objects 11-20 are added instead of replacing the values 1-10 as well.

For a little bit of added context, The parent collection is a leaderboard which has the array field of objects for the ranks as follows

const RankingsField = {
  name: 'rankings',
  label: 'rankings',
  type: 'array',
  admin: {
    components: {
      Field: RankingsUpload,
    },
  },
  fields: [
    { name: 'rank', label: 'rank', type: 'number' },
    { name: 'player', label: 'speler', type: 'text' },
    { name: 'score', label: 'score', type: 'number' },
    { name: 'prize', label: 'prijs', type: 'text' },
  ],
};

The custom component accepts csv or xlsx files that contain rows which are converted to the array of objects to be stored for which I use setValue of useFieldType. When the leaderboard exists with rankings, after uploading a new file with "updated" rankings, I see the new values in the UI for a second through the value variable before it flashes back to the original values that are in the database or with only the exceeding values added as mentioned above.

[jmikrut]

Hey @lorenzowijtman — we just reviewed this at Payload and have understood your ask.

The issue is that array and block fields actually only store the length of their array-based values within form state, and each field within each row of an array-based field stores its own value.

So, when you use setValue of an array-based field, right now, we are only expecting a numeric-based input of the length of the array. To do what you're describing, you could make use of some lower-level Form dispatchFields actions like REPLACE_STATE directly, but it'd be up to you to create the structure of all the field paths yourself. This would be totally possible right now.

What we might be able to do instead is expose some specific actions within useForm for this type of thing to be easier. Like a setRows method or similar, which takes in an array of row-based data and then automatically handles form updates for you.

Or we could extend the setValue method from useField so that if you do pass an array of data to setValue, the method would be smart enough to handle all of this for you automatically.

In any case, the team is aware of this and is going to try and continue brainstorming how to give you what you need.