触发“onChange”时，Formik FieldArray 失去焦点答案

【问题标题】：Formik FieldArray lost focus when "onChange" triggered触发“onChange”时，Formik FieldArray 失去焦点
【发布时间】：2018-09-27 07:32:34
【问题描述】：

我已按照an article written by Formik Team member 的教程进行操作但是事情并没有像预期的那样工作；每当我在文本输入字段中输入内容时，每次按下它都会失去焦点，我必须一次又一次地单击文本输入字段来写下一个字符。我已经分享了@987654322@ 链接。

这里的代码摘自文章

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';

export const InviteFriends = () => (
  <div>
    <h1>Invite Friends</h1>
    <Formik
      initialValues={{ friends: ['', '', ''] }}
      onSubmit={values => alert(values)}
      render={formikProps => (
        <Form>
          <Field name="email" />
          <FieldArray
            name="friends"
            render={({ remove, push }) => (
              <>
                {formikProps.values.friends.map((friend, i) => (
                  <div key={`friend-${i}-${friend}`}>
                    <Field name={`friends[${i}]`} type="email" />
                    <button type="button" onClick={() => remove(i)}>
                      X
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => push('')}>
                  Add friend
                </button>
              </>
            )}
          />
          <button type="submit">Invite Friends</button>
        </Form>
      )}
    />
  </div>
);

【问题讨论】：

标签： reactjs formik

【解决方案1】：

代码中的问题在于关键属性模板：key={'friend-${i}-${friend}'}。当 props 改变时，这个键对于同一个组件应该是永久的。但是，在您的情况下，它包括${friend}，这意味着键随每次击键而变化。

解决方案：只需从您的密钥中删除 ${friend} 以使其对同一项目保持不变。

【讨论】：

这花了我几个小时才弄清楚，谢谢先生！