Formik 动态设置数组中元素的FieldValue

Question

我们有一个带有翻译的 Formik 表格。初始值如下所示：

{
  // other stuff here like id, createdAt, etc.
  translations: [
   {
     languageCode: 'de',
     name: 'German',
   },
   {
     languageCode: 'fr',
     name: 'French',
   },
   {
     languageCode: 'it',
     name: 'Italian',
   }
  ]
}

selectedLanguage

等于当前选择的语言 'de' | 'fr' | '它'。 然后我们循环

availableLanguages

并为每个它创建和输入字段，如下所示：

{
    languages.map((lang, ind) => (
        <div key={ind}>
            {selectedLanguage === lang && (
                <FormField>
                    <Input
                        name="Topic"
                        value={
                            values.translations?.find(
                                elm => elm.languageCode === lang
                            )?.name || ""
                        }
                        onChange={(v: React.ChangeEvent<HTMLInputElement>) => {
                            // Doesn't work
                            setFieldValue(
                                `${
                                    values.translations?.find(
                                        elm => elm.languageCode === lang
                                    ).name
                                }`,
                                v.target.value
                            );
                        }}
                    />
                </FormField>
            )}
        </div>
    ));
}

如何在要更改的语言的值数组中动态设置名称？

谢谢

Answer 1

解决方案非常简单：

<FormField key={index}>
  <Input
    value={(values.translations && values.translations[index].name) || ''}
    onChange={(v: React.ChangeEvent<HTMLInputElement>) =>
      setFieldValue(`translations.${index}.name`, v.target.value)
    }
    onBlur={() => setFieldTouched(`translations.${index}.name`, true)}
  />
</FormField>

Answer 2

对我来说以下有效：

setFieldValue(`translations[${index}].name`, v.target.value)