移除元素后，React组件不会重新绘制

Question

我在一个名为Field的组件中有以下代码。我在组件中也有删除按钮。正在从父组件传递selField的值。假设有三个字段如下。当Banana被删除时，Peach被删除，但Banana仍在屏幕上。在脚本中，我可以看到selField值显示了正确的值(保留了Apple和Peach(，但在UI中它的行为不正确。对于每个字段，我都有唯一的Id和Key，它们也是从父组件传递的。如何解决此问题？

Field1苹果删除按钮
Field2香蕉删除按键ield3桃删除键

<select className='m-2' onChange={(e) => handleFieldFilterDropdownChange(e)} selectedvalue={selField}> 
<option value="none"> -- Select a field -- </option>
{/* Mapping through each fruit object in our fruits array
and returning an option element with the appropriate attributes / values.
*/}
{fields.map((field) => <option key={field} value={field}>{field}</option>)}
</select>
<button onClick={() => deleteFilterRow(id)}>Delete</button>

Answer 1

我正在更改一个用于Key的变量。当我创建一个新变量时，问题就解决了。