如何在“validationSchema”Formik 和 Yup 中插入变量？答案

【问题标题】：How to insert variable in `validationSchema` Formik and Yup?如何在“validationSchema”Formik 和 Yup 中插入变量？
【发布时间】：2019-07-11 09:04:19
【问题描述】：

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

<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'),
})}

【问题讨论】：

标签： javascript reactjs forms formik yup

【解决方案1】：

编辑：

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

你可以做两件事：

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

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

在 ES6 中，您可以使用简写的计算属性名称。

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

来源 - Javascript: Computed Property Names (ES6)

【讨论】：