从在反应中多次呈现的特定组件中选择元素

Question

我有一个组件card，它被多次渲染，每次都包含不同的数据，如下所示：

{ this.state.response.reminders.map((item,i=0) =>{
                                return <Card key={i++} reminder={item} deleteRem={this.deleteReminder}/>
                            }
                        )}

card 组件有一个按钮，单击该按钮会删除卡片。我通过从单击按钮的特定card 中提取数据来做到这一点，将其发布到我的烧瓶后端以从数据库中删除。问题在于我提取数据的方式，通过像这样访问每个元素：

let plainData = {};
plainData['reminder']=event.target.parentElement.parentElement.parentElement.children[1].children[1].children[0].children[0].value
plainData['date']= event.target.parentElement.parentElement.parentElement.children[1].children[0].innerText

选择语句的巨大链是一段非常糟糕的代码，我知道。这是我用来让它工作的一种快速而肮脏的方式。但我很好奇如何正确做到这一点。感谢阅读！

编辑：

我认为我的问题没有正确传达。确切地说，我关心的是冗长而不整洁的代码： plainData['reminder']=event.target.parentElement.parentElement.parentElement.children[1].children[1].children[0].children[0].value
选择元素的更好方法是什么？

Answer 1

您可以简单地传递一个小箭头函数，直接将item 传递给deleteReminder：

this.state.response.reminders.map((item, i) => {
    return <Card key={i} reminder={item} deleteRem={() => this.deleteReminder(item)} />
})

Answer 2

我建议使用带有功能组件的反应钩子，根据您的代码，我可以看到您正在使用基于类的组件this. 给出了这一点。

所以我会为两者解释;

1. 带钩子的功能组件

你可以使用 useEffect 钩子和它的依赖数组，当使用效果数组中的那些依赖改变时，你可以得到重新渲染

useEffect(() => {
       someFunction()
     ,[dependency, someOtherDependency]}

组件仅在 dependency 或 someOtherDependency 更改时重新渲染

1. 类组件

componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
   doSomethingFunc()
} 

// I can also check specific prop as well

if (this.props.someSpecificProp !== prevProps.someSpecificProp) {
   doSomethingFunc()
}
}