Javascript 映射Formik文本字段

我正在使用material ui文本字段，并使用Formik验证它们。我希望映射项目，而不是将所有内容都输入多次，但我无法这样做

return (
    <div>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}>
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
          } = props;
          const change = (name: string, e: FormEvent) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <div className="main-content">
              <form
                style={{ width: '100%' }}
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />

{/* {[{ variant:"outlined", margin:"normal", id:"email", name:"email", label: "Email", value: email, onChange:{change.bind(null, 'email')}
          ].map((item, index) => (
            <TextField></TextField>
          ))} */}

                  <br></br>
                  <CustomButton
                    text={'Remove User'}
                  />
                </div>
              </form>
            </div>
          );
        }}
      </Formik>
    </div>
  );

在

上触摸。电子邮件
。当我尝试使用
错误时也是如此。

(property) touched: FormikTouched<{
    email: string;
}>
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormikTouched<{ email: string; }>'.
  No index signature with a parameter of type 'string' was found on type 'FormikTouched<{ email: string; }>'.ts(7053)

（属性）触摸：FormitTouched
元素隐式具有“any”类型，因为类型为“string”的表达式不能用于索引类型为“formitouched”。
在“FormitTouched”类型的ts（7053）上未找到具有“string”类型参数的索引签名
谢谢你的沙箱

基于您的沙箱，我已经通过
map
函数成功地进行了字段迭代

首先分离独特的场道具

属于输入的道具，如
name
id
label
等
属于组件的道具，如
变体
边距
处理程序
等

您将得到两个对象

（1） 一个应该抽象到组件并保存在单独文件中的字段，以后可以使用另一个组件中的字段

在这里，因为您使用formik并且需要有一个formik的引用键，所以我在对象中添加了
formikRef

const文件=[
{
id:“电子邮件”，
名称：“电子邮件”，
formikRef：“电子邮件”，
标签：“电子邮件”
},
{
id:“姓名”，
姓名：“姓名”，
福米克里夫：“名字”，
标签：“名称”
}
];

（2） 应存储在组件中的第二个对象，因为它解析
道具

我通常将它们包装在useMemo钩子中，因此如果依赖项对象没有更改，就不应该重新声明它。这只是为了性能，您也可以使用直接对象

constdefaultprops=React.useMoom（（）=>({
文本字段：{
变体：“概述”，
保证金：'正常'，
onChange:props=>{
福米克手换（道具）；
福米克车把（道具）；
},
onBlur:formik.把手
}
}),
[福米克]
);
//无使用备忘录
const defaultProps={
文本字段：{
变体：“概述”，
保证金：'正常'，
onChange:props=>{
福米克手换（道具）；
福米克车把（道具）；
},
onBlur:formik.把手
}
}

最后一步是在渲染中映射道具

{
map（{formikRef，…input}）=>(
))
}

我还创建了一个工作沙盒

LE:类型检查是一个问题，但只需稍加搜索即可找到解决方案。。。讨论了这个问题

为了通过类型检查问题，我已经进行了更正，并从
Formik
添加了
getIn
helper函数。
也许您想通过Formik检查新的useFormik钩子。你在地图上标出你的领域有多少？你也有一个问题与评论的代码，你映射的道具，但你从来没有设置如果你可以复制的问题在一个codesandox，我会尽力帮助you@Sabbin喂，给你：THANKSS@Jnl我在下面的答案中添加了一个解决方案和解释，请检查
formik.touch[formikRef]上的代码沙盒给出了一些类型错误
等。尽管它似乎在沙盒上工作，但它不会在上脱机编译，而在沙盒中哪里会出现类型错误？我什么都没得到，沙箱里连警告都没有。。。我怎么知道你在VS里有什么？我根据您在沙盒中提供的代码提供了答案。这很奇怪。我在qs中附上了截图。当我打开沙箱时，我得到了这些错误。关于VS代码，我的意思是idk如何在这里编译，如果我在代码沙箱之外实现它，它在VS上就不会工作。因为我有这些errors@Jnl我已经更新了答案和沙盒，请检查。很抱歉，由于
Textfield
上的重载错误，它仍然不适用于我：/
(property) touched: FormikTouched<{
    email: string;
}>
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormikTouched<{ email: string; }>'.
  No index signature with a parameter of type 'string' was found on type 'FormikTouched<{ email: string; }>'.ts(7053)