Material-ui 自动完成不会根据值属性更改其值

Question

我必须生成多行，其中每一行都有一个下拉菜单（自动完成），可以通过 API 和其他字段进行搜索。 一切都运行良好，除了当我从某处的中间删除一行时，只有自动完成组件显示与之前相同的值，但是，我在 state 中获得了正确的数据。

因此，如果我有一个包含以下项目的数组。

现在，如果我删除第 2 行，即 Brite – (500 g)，我会在屏幕上看到这个显示。

但是，行的所有其他项目都正确显示，所以我假设我处理数组的逻辑没有问题，但是由于自动完成显示错误的值（但是它保存了正确的 object 传递到它的 value 属性），似乎所有商品的数量和价格都突然发生了变化，最后一个商品被删除（而不是第二个）。 如果我总结这个问题，虽然该组件是基于state中的新数组重新渲染的，这是删除一行后获得的，但自动完成仍然显示它之前的值，而现在已经不是数据了。

<Autocomplete
                            options={skuItems}
                            getOptionLabel={option => option.name}
                            renderInput={params => (
                                <TextField {...params} label="SKU" variant="outlined" />
                            )}
                            value={selectedSkuItems[index]}
                            onChange={(e, val) => orderItemHandleChange(e, val, index)}
                            onInputChange={skuSearch}
/> (edited) 

Answer 1

问题出在您拥有 map function 的地方。 密钥必须是独一无二的。 如果涉及到索引，那就不好了。 因为您按索引删除项目，然后另一个项目取代该索引，并且正确重写 DOM 失败。 如下图所示：

collection.map((value, index) => { <div key={something unique}> </div>}