如何解决重叠的数据从映射的输入行在JavaScript?

Question

我有一个React表单，它涉及从API收集数据并对其进行处理，我从API获取项目，然后通过它映射为每个对象创建表单，因此我的用户可以输入价格。用户应该能够设置多个项目的价格进行处理。

我的问题是从搜索功能，我过滤通过对象来实现搜索功能。但是，如果我设置了第一件商品的价格，那么就过滤列表，这样第一件商品就消失了。第一件商品的价格仍然在第一个input中，因此价格看起来不匹配。

它们不是不匹配的，虽然我用来记录数据的对象仍然是准确的，只是看起来很混乱。

我已经在这个沙箱中重现了我的错误。

Answer 1

问题是您从未设置过价格输入字段的值。

<input
type="number"
onChange={(e) => handleFormData(item.name, e.target.value)}
/>

由于没有值传递给输入，一旦卸载，它将失去它的值。这就是发生在你身上的事。当它卸载时，它失去了它的值。

解决问题

<input
type="number"
value={formData[item.name]}
onChange={(e) => handleFormData(item.name, e.target.value)}
/>

但请使用唯一标识符来标识，而不是名称。因为可能会有冲突。sarah

是冲突的代码链接- https://codesandbox.io/s/musing-satoshi-q1g52?file=/src/App.js