输入重新渲染和每次我使用formik时输入的焦点

发布于 2025-02-08 09:21:59 字数 528 浏览 2 评论 0原文

在Formik中使用FieldArray时，我的输入始终会恢复，因此当用户类型时，它们会失去焦点。

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

遵循文档后，Formik使用索引作为儿童键，这不是一个好练习，但是我在钱包中没有任何其他不变的价值（所有这些价值形式）。我相信，重新渲染并不是将索引用作密钥的问题，而是只需在每个值变化时将整个映射值重新呈现。

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

原文

When using FieldArray in Formik my inputs are always rerendered and thus they lose focus when a user types.

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

Following the docs, Formik uses an index as the child key, which is not a good practice, but I don't have any other immutable value in the wallet to use (all of them might be changed within form). I believe the re-render is not a matter of using the index as a key but simply Formik re-rendering the whole mapped values each time a value changes.

Is there any way to prevent this to happen without being a huge hack?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栖迟 2025-02-15 09:21:59

更改时，您只需要放置一个应为同一组件的键，

当道具像这样

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

解决方案：

删除

key={i}

并执行此操作

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

You just have to put a key that should be permanent for the same component when props change

like this

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

Solution :

remove