javascript - 如何在“validationSchema”Formik 和 Yup 中插入变量？

Question

我尝试使用<FieldArray />Yup 在 Formik 中进行验证。单击“添加用户”后，我生成了一堆用户名。每个字段看起来像：

<Field
   type="text"
   name={`users.${index}.name`}
/>
<ErrorMessage
   name={`users.${index}.name`}
   component="div"
   className="invalid-feedback"
/>

我应该是什么validationSchema样子？在我看来，我应该为shape方法添加索引而不是简单的名称。但是我该怎么做呢？

validationSchema={yup.object().shape({
   // ?????
   name: yup.string().required('First Name is required'),
})}

标签： javascriptreactjsformsformikyup

Answer 1

编辑：

您要做的是Formik在初始值更改时更新组件。将enableReinitialize设置为 true

---

你可以做两件事：

1. 像这样将新的键/值对附加到对象

var eatables = {vegetable: 'Carrot'}
var fruit_var = 'fruit'
eatables[fruit_var] = 'Apple'
console.log(eatables) // {fruit: 'Apple', vegetable: 'Carrot'}

2. 在 ES6 中，您可以使用速记计算属性名称。

var fruit_var = 'fruit'
var eatables = {[fruit_var]: 'Apple', vegetable: 'Carrot'}
console.log(eatables) // {fruit: 'Apple', vegetable: 'Carrot'}

来源 - Javascript：计算属性名称 (ES6)