Как сохранить значение выбранных флажков в динамической форме с помощью Zod?

Проблема, с которой вы сталкиваетесь при моделировании, заключается в том, что вы предполагаете однозначное сопоставление между ссылкой на состояние формы (name) и входным «элементом управления» (флажком).

В вашем случае концептуальное сопоставление между флажком и состоянием формы, в котором он содержится, должно быть «многие к одному». Нет смысла сопоставлять отдельный флажок с его собственным адресуемым элементом состояния, поскольку состояние флажка на самом деле является просто функцией того, что присутствует и чего нет в zodSitesUrls. Если URL-адрес отсутствует, значит, ему просто нет соответствующей записи в zodSitesUrls. Таким образом, нет состояния для привязки «неотмеченного» флажка. Вот что приводит к проблемам, когда вы предполагаете, что между индексом массива и каждым флажком существует какое-то сопоставление. Такого стабильного отображения не существует.

Итак, мы можем подключить один контроллер к zodSitesUrls и несколько флажков внутри этого контроллера.

Мы переопределяем логику onChange, чтобы добавлять/удалять соответствующий URL-адрес zodSitesUrls в зависимости от того, отмечен он или нет.

Мы также переопределяем логику value, чтобы она показывалась отмеченной галочкой, если соответствующий URL-адрес присутствует в zodSitesUrls.

Вы не указали, из какой библиотеки Checkbox. Он может использовать что-то кроме value, чтобы контролировать, отмечен ли он. Из вашего исходного вопроса я предположил, что второй аргумент onChange действительно isChecked. То, как именно эти вещи связаны, зависит от библиотеки.

Кроме того, форма является динамической, поскольку если вы ищете, скажем, «спорт», вы получаете флажки для спортивных веб-сайтов. Если вы измените ключевые слова поиска на «новости», спортивные флажки будут заменены на «новостные» веб-сайты, но выбранные URL-адреса «спортивных» веб-сайтов должны быть где-то сохранены.

С этим решением все будет работать нормально. Если флажки внутри контроллера изменятся, это не имеет значения. Поскольку все извлекается из основного списка URL-адресов, и значение этого списка не нужно будет изменять при отображении различных флажков, оно будет независимо от этого.

Это означает, что вы можете отобразить набор флажков, заполнить список с их помощью, отобразить совершенно новый набор, еще больше заполнить список, вернуться к исходному набору и удалить некоторые элементы и т. д.

<Controller
  name = "zodSitesUrls"
  control = {control}
  render = {({ field }) =>
    webSites?.map((ns, index) => (
      <Checkbox
        key = {ns.siteUrl}
        label = {ns.siteName}
        {...field}
        
        // Override default field.onChange
        onChange = {(e, isChecked) => {
          // Checked case
          if (isChecked) {
            // Already in list, do nothing
            if (field.value.includes(ns.siteUrl)) return
            
            // Add entry to array, without losing existing entries
            field.onChange([...field.value, ns.siteUrl])
            
            return
          }
        
          // Unchecked case
          // Filter this value out from list (doesn't matter if it was never here anyway)
          field.onChange(field.value.filter(url => url !== ns.siteUrl))
        }}
        
        // Override default field.value
        value = {field.value.includes(ns.siteUrl)}
      />
    ))
  }
/>

Вам также следует убедиться в defaultValues конфигурации формы, что zodSitesUrls является массивом. Например. zodSitesUrls: [].