使用 Formik 时每次输入时输入重新渲染和失去焦点答案

【问题标题】：Input re-rendering and losing focus every time I type when using Formik使用 Formik 时每次输入时输入重新渲染和失去焦点
【发布时间】：2023-01-20 09:06:29
【问题描述】：

在 Formik 中使用 FieldArray 时，我的输入总是重新呈现，因此当用户键入时它们会失去焦点。

   <FieldArray
      name="wallets"
      className="space-y-4"
      component={(arrayHelpers) => (
        <>
          {
            formik.values.wallets.map((wallet, i) => (
              <div
                key={i}
   {...}

按照文档，Formik 使用索引作为子项 key，这不是一个好的做法，但我在钱包中没有任何其他不可变值可供使用（所有这些值都可能在表单内更改）。我相信重新渲染不是使用索引作为键的问题，而是每次值更改时 Formik 都会重新渲染整个映射值。

有什么办法可以防止这种情况发生而不会成为一个巨大的黑客？

【问题讨论】：

标签： javascript formik

【解决方案1】：

当道具改变时，你只需要为同一个组件放置一个应该永久的键

像这样

   <FieldArray
      name="wallets"
      className="space-y-4"
      component={(arrayHelpers) => (
        <>
          {
            formik.values.wallets.map((wallet, index) => (
              <div
                key={`wallets.${index}`}
   {...}

解决方案：

消除

key={i}

并这样做

key={`wallets.${index}`}

【讨论】：