Question

我在父组件的状态中有一个列表：

this.state = {
    productsForm: [],
}

我在列表上执行一个地图并调用子组件：

    renderProducts() {
    const result = this.state.productsForm.map((value, index) => (
      <ProductForm
        index={index}
        onChange={(name, form, strength) => {
          const productsForm = this.state.productsForm;
          productsForm[index] = { name, form, strength };
          this.setState({ productsForm });
        }}
        onRemove={(id) => {
          const filtered = this.state.productsForm.filter((_, i) => i !== id);
          this.setState({ productsForm: filtered });
        }}
      />
    ));
    return result;
   }

在子组件中，我有一个删除按钮，它将自身的“id”返回给父组件：

<FloatingActionButton
onClick={() => { onRemove(this.state.id); }}
>

它可以从父组件中删除子项，但在UI中，（我的意思是浏览器中的html页面）存在一些问题。当我删除一个索引较低的孩子时，虽然它将从状态中删除，但它仍然在UI中！

我认为“索引”中存在问题，或者我的代码中存在类似问题。您有什么建议让我解决这个问题吗？

Answer 1

您忘记将key属性添加到每个ProductForm组件。这样，React知道哪些组件已被更改。

<ProductForm key={index} ... />

如果您使用product的ID作为key而不是索引，情况会更好。

Answer 2

index中的key属性是ProductForm吗？如果没有，则需要添加密钥属性。如果是，那么在任何一种情况下都使用index作为唯一的道具是错误的。看看这个：

数组中有三个元素

[0,1,2,3]

React通过key道具识别它们。现在，如果您从数组中删除了包含1的密钥，它将从您的数组中删除，但它将保留在UI render方法中。因为你的数组现在看起来像这样

[0,1,2]

1的关键支柱仍在那里。最后，这意味着您需要提供唯一标识，例如：

key={index + somethingUnique} // worst case you can generate random numbers

React - 映射状态列表不会正确影响UI

2 个答案: