当使用 react-final-form 从表单数组中删除元素时,<input> 的显示值不会更新,但最终表单数据对象会更新

when removing element from form array with react-final-form, the displayed value of the <input> does not update, but final-form data object does

这是一个奇怪的情况。我已经简化了一个 react-final-form-array 的例子,它允许我向我的表单添加元素,并且我可以扩展一个对象数组。它与 react-final-form-arrays 提供的简单示例非常相似。该数组工作正常,但我遇到的问题是,当我尝试删除特定元素时,输入中显示的实际值不会改变。例如,图片:

在这里我们可以看到我可以将客户添加到列表中,这构成了一个对象数组。这很好用。现在,假设我想摆脱第一个元素。我点击 X,会发生什么?

在这里我们可以看到表单数据正确地删除了我想删除的第一个元素,但是,输入上显示的实际值仍然是 John Doe,尽管表单知道它是 Mary Jane。当我点击输入时,它们似乎更新为正确的值。但这不是应该发生的事情。

最奇怪的是,我制作了一个 codesandbox,您可以在这里看到 https://codesandbox.io/s/agitated-wilson-5xlqq

它与我在我的应用程序中的代码完全相同,并且按预期工作!所以我什至无法重新创建错误,并且我确保依赖项与我正在使用的版本相同。我只能在自己的设置中重新创建它,我不明白为什么会这样。

我试过 chrome、safari 和 firefox,它们似乎都在我的电脑上做同样的事情,我什至在我的 phone 上尝试连接到我运行的反应服务器我的笔记本电脑,它们都表现出相同的行为。

我不知道我能做什么,版本,反应,如果有人有任何想法或过去遇到过类似问题,请帮助。我不会在这里粘贴我的代码以免膨胀post,但你可以看到它与我上面链接的沙箱中的代码完全相同。

编辑: 我想指出另一个发生的错误,那就是一旦我删除第一个元素,如果我尝试编辑它,它会将另一个字段推入数组使用我刚刚添加的输入,就好像它被绑定了一样。我希望我可以在 codesandbox

上重新创建它

尝试删除您的 node_modules 文件夹并重新安装它们。您是否在控制台日志中看到任何错误?