Javascript 我需要使用什么生命周期钩子？-反应

情况是这样的：我有一个数据库，数据就在那里。数据由一组对象构成。对象有三个属性（现在相关）。它们是：id、parentId和status。组件使用这些属性构建，并且组件递归地克隆自身，因此它们彼此嵌套。看起来是这样的：

类任务扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
状态：this.props.status
}
}
//在removeTask更改状态后立即被激发
静态getDerivedStateFromProps（props）{
console.log（“道具状态”）
返回{status:props.status}
}
componentDidUpdate（）{
控制台日志（“更新”）；
this.checkDeleted（）
}
checkDeleted=（）=>{
如果（this.state.status==='deleted'）{
deleteTask（this.props.id）//从数据库中删除的函数
}
}
任务=（）=>{
console.log（“儿童渲染”）
返回此.props.tasks
.filter（task=>task.pId==this.props.id）
.map（任务=>{
返回
})
}
removeTask=（）=>{
console.log（“状态已更改”）
this.setState（{status:'deleted'}）
}
render（）{
console.log（“呈现”）
返回(
首先，我对您的命令有问题。您的数据取决于数据库中的内容。您可能会从状态中删除，而数据库任务失败。因此，为什么要手动更新状态呢？只需侦听并从数据库中的道具加载您的状态。当您从数据库中删除道具时，您的道具将被更新并重新渲染。因此，基本上如果我在你之前，我会坚持

class Task extends React.Component{
    constructor(props){
        super(props);
    }

    //gets fired right after the state changed by removeTask
    static getDerivedStateFromProps(props){
        console.log("state from props")
        return{status: props.status}
    }

    componentDidUpdate(){
      console.log("update"); 
    }

    tasks = () => {
        console.log("childs rendered")
        return this.props.tasks
        .filter(task => task.pId === this.props.id)
        .map(task => {
            return <Task 
                id={task.id} 
                pId={task.pId}
                status={this.props.status}
            />
        })
    }

    removeTask = () => {
        console.log("state changed");
        deleteTask(this.props.id) //a function which deletes from database
    }

    render(){
      console.log("render")
      return(
        <div
          <button onClick={this.removeTask} />
          {this.tasks()}
        </div>
      )
    }
}

类任务扩展了React.Component{
建造师（道具）{
超级（道具）；
}
//在removeTask更改状态后立即被激发
静态getDerivedStateFromProps（props）{
console.log（“道具状态”）
返回{status:props.status}
}
componentDidUpdate（）{
控制台日志（“更新”）；
}
任务=（）=>{
console.log（“儿童渲染”）
返回此.props.tasks
.filter（task=>task.pId==this.props.id）
.map（任务=>{
返回
})
}
removeTask=（）=>{
console.log（“状态更改”）；
deleteTask（this.props.id）//从数据库中删除的函数
}
render（）{
console.log（“呈现”）
返回(
问题是Database会删除发生单击的特定组件，但不会删除该组件的子组件。因此，在该结构中无法访问这些子组件，但可能会导致问题。子组件依赖于
this.props.tasks
，该子组件在每次属性更改时都会重新呈现。当
tasks
更改时因此会重新评估
任务（）
和整个孩子。因此，是的，当你删除家长时，孩子也会被删除，除非你做得不对。状态道具将如何更改？你能更深入地解释你的意思吗？在code@DorLask为什么您首先需要知道
状态
。如果数据库中有该状态，则该状态尚未被删除，JUt呈现它。如果没有，那么它已被删除，请重新呈现新列表。是否需要状态？因为在我看来，状态属性将知道元素是否已删除或存在。如果我们调用deleteTask（）单击时，元素将立即从数据库中删除，但元素的子元素将不知道它们的父元素已被删除，因此它们将保留在数据库中。如果单击时删除父元素，链将断开，它的子元素将出现在道具中，但它们永远不会被渲染。这就是为什么我还不理解你的想法。