javascript - getIn 与 Formik 的作用是什么?

标签 javascript reactjs typescript formik

getIn 在这里的作用究竟是什么?它是否只是从定义的字段中读取和分配值?

{fileds.map(({ formikRef, ...input }) => (
    <TextField
       key={formikRef}
       helperText={
       getIn(formik.touched, formikRef)
                    ? getIn(formik.errors, formikRef)
                    : ''
                }
       value={getIn(formik.values, formikRef)}
      {...input}
      variant="outlined"
      margin="normal"
    />
))}

最佳答案

getIn 是 Formik 中包含的实用函数。您可以使用它通过对象的路径从对象中提取深度嵌套的值。使用点语法表示路径以访问对象属性和方括号以访问数组。
例如:

var exampleFormValues = {
  people: [
    {
      name: 'Alice',
      contactDetails: {
        email: 'alice@example.com',
        mobilePhone: '07123 456789'
      }
    },
    {
      name: 'Bob',
      contactDetails: {
        email: 'bob@example.com',
        mobilePhone: '07999 999999'
      }
    },
  ]
};

// this will return 'alice@example.com'
var emailOfFirstPerson = getIn(exampleFormValues, 'people[0].contactDetails.email');
它与 lodash 中的 get 函数基本相同,记录在这里:https://lodash.com/docs/#get

关于javascript - getIn 与 Formik 的作用是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61206836/

相关文章:

javascript - javascript 函数中的索引

javascript - AngularJS 表单验证不起作用,显示空表单

reactjs - React、Fetch-API、no-cors、不透明响应,但仍在浏览器内存中

javascript - 更新数组 JavaScript 中的字段对象

javascript - angularjs $watch 无法在函数中工作

javascript - 数组中带有权重的随机数

javascript - react /Redux : Where to put jQuery event handlers in component awaiting async data

Javascript 过滤嵌套数组

javascript - Typescript Resolve Observable 实体

javascript - 无法在 React.js 上从 svg 加载图像