Javascript 尝试从列表中删除项目时的反应

我正在学习React并尝试从列表中删除一项。我尝试了两种解决方案，但找不到任何可行的方法。我需要一只额外的眼睛来看看我错过了什么

我的代码调用delete函数

handleDeletePrice = deletePrice => {

  this.setState(prevState => ({
    // spreads out the previous list and delete the price with a unique id(date)
    priceArr: prevState.priceArr.filter(item => item.date !== deletePrice)
  }));
};

在这里我调用了hook（？）组件中的函数。这将显示一个价格列表，每个价格框中都有一个删除按钮

{this.state.priceArr.map((props) => (
              <PriceBox
                {...props}
                key={props.date}
                toggleEditing={this.toggleItemEditing}
                handleDeletePrice={this.handleDeletePrice}
                onChange={this.handleItemUpdate}
              />
            ))}

{this.state.priceArr.map（（道具）=>(
))}

在单价格框组件中，我添加了单击删除价格：

{this.props.handleDeletePrice && (
                  <button
                    type="button"
                    className="delete-btn"
                    onClick={() => this.props.handleDeletePrice()}
                    >
                      X
                    </button>
                    )}

{this.props.handledeletprice&&(
this.props.handleDeletePrice（）}
>
X
)}

要查看我的完整代码，您可以在CodeSandBox查看我的演示，我在其中加载了github repo以显示我的代码

在本演示中，单击

Prices

按钮，将打开一个弹出窗口。这是这个单页应用程序中的另一个页面。在此窗口中，您可以看到价格列表和每个价格框中的

X

按钮。我还尝试使用

日期

作为唯一id，因为每个价格应该每天输入一次。换句话说，我试图使用

日期

作为唯一id来删除价格框

---

我缺少什么？

我不了解业务领域，但我认为这种方法可以有所帮助

{this.state.priceArr.map（（道具）=>(
))}

{this.props.handledeletprice&&(
this.props.handleDeletePrice（this.props.price）}
>
X
)}

调用PriceBox组件中的

handleDeletePrice

函数时，您没有传递参数。我就是这么想的。我如何传递论点？我做了console.log

deletePrice

，它返回了未定义的…谢谢，让它工作了。我是React的初学者，忘记了这个简单的解决方案！