我正在尝试使用ReactJS构建一个动态组件。因此，我有一个产品列表，每次用户想要添加新产品时，他都会单击+按钮。这将创建一个新产品并将其添加到列表中。该列表有一个名为Delete All的按钮，用于删除所有产品。
要删除所有产品，我在组件创建时使用了产品列表中初始化为“Created”的状态，当用户单击“Delete All”时，我将其更改为“Delete”，并使用ComponentWillUpdate回调更新Childs(产品)。
以下是一些代码：
Index.js

render() {
    return (
      <div className="App">
        <h1>Dynamic List</h1>
        <ProductList />
        <hr />
        <h1>Static List</h1>
        <ProductListStatic />
      </div>
    );
  }

Product.js

class Product extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      state: "created"
    };
  }

  componentDidUpdate(prevProps) {
    if (
      this.props.parentState === "deleted" &&
      this.state.state === "created"
    ) {
      this.setState({ state: "deleted" });
    }
  }

  render() {
    if (this.state.state !== "deleted") {
      return (
        <div style={{ margin: "5px" }}>
          Product.....
          <button onClick={this.props.addNewProduct}>+</button>
        </div>
      );
    } else {
      return null;
    }
  }
}

我的ProductList.js

class ProductList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      state: "created"
    };
  }

  componentDidMount() {
    let newProducts = [...this.state.products];
    newProducts.push(
      <Product
        key={0}
        addNewProduct={this.addNewProduct}
        parentState={this.state.state}
      />
    );
    this.setState({ products: newProducts });
  }

  addNewProduct = () => {
    let length = this.state.products.length;
    const newProducts = [
      ...this.state.products,
      <Product
        key={length}
        addNewProduct={this.addNewProduct}
        parentState={this.state.state}
      />
    ];
    this.setState({ products: newProducts });
  };

  deleteAll = () => {
    this.setState({ state: "deleted" });
  };

  render() {
    return (
      <div>
        {this.state.products}
        <button style={{ marginTop: "20px" }} onClick={this.deleteAll}>
          Delete All
        </button>
      </div>
    );
  }
}

好吧，这并没有更新蔡尔兹夫妇，我不知道为什么。我认为这是因为这份名单是动态的。我尝试了一下使用静态列表，它运行得很好(代码如下)。
ProductListStatic.js

class ProductListStatic extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      state: "created"
    };
  }

  deleteAll = () => {
    console.log("delete all");
    this.setState({ state: "deleted" });
  };

  render() {
    let products = [
      <Product
        key={0}
        addNewProduct={this.addNewProduct}
        parentState={this.state.state}
      />,
      <Product
        key={1}
        addNewProduct={this.addNewProduct}
        parentState={this.state.state}
      />
    ];
    return (
      <div>
        {products}
        <button style={{ marginTop: "20px" }} onClick={this.deleteAll}>
          Delete All
        </button>
      </div>
    );
  }
}

以下是一个演示：SandBox live dome
有人知道为什么它不适用于动态产品吗？