防止将重复的对象添加到Firebase后端

Question

我有一个问题，关于防止重复内容被添加到
 Firebase作为后端的购物车。

这应该很简单，但是由于某种原因，我尝试的任何方法都无法正常工作。

    const { products } = this.props;

    return (
      <div>
        {products === undefined ? (
          <p>Loading......</p>
        ) : (
          products.map(val => {
            return (
              <div key={val.id} className="row">
                <div className="col-sm-6">
                  <div className="card-body">
                    <img src={val.url} className="img-fluid" alt="Responsive" />
                    <h5 className="card-title">{val.name}</h5>
                    <h6 className="card-subtitle mb-2 text-muted">
                      {val.price}
                    </h6>
                    <button
                      className=" "
                      style={{
                        float: "right",
                        marginBottom: "1px",
                        width: "100%"
                      }}
                      onClick={() => this.submit(val)}
                    >
                      <i className="fas fa-cart-plus" />
                    </button>
                  </div>
                </div>
              </div>
            );
          })
        )}
      </div>
    );