我需要使用哪个生命周期挂钩？ -反应

Question

The situation is this: i have a database, where the data is. The data is structured with an array of objects. The objects have three properties (which are relevant now). These are: id, parentId, and status. The components build up with these properties, and the component clones itself recursively, so they are nested within each other. It looks like this:

 class Task extends React.Component{ constructor(props){ super(props); this.state = { status: this.props.status } } //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"); this.checkDeleted() } checkDeleted = () => { if (this.state.status === 'deleted'){ deleteTask(this.props.id) //a function which deletes from database } } 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.state.status} /> }) } removeTask = () => { console.log("state changed") this.setState({status: 'deleted'}) } render(){ console.log("render") return( <div <button onClick={this.removeTask} /> {this.tasks()} </div> ) } } 

What happens: the order of the logs are the next:

• state changed (removeTask())
• state from props (gDSFP())
• render
• childs rendered (tasks() fired inside render())
• update (componentDidUpdate())

This isn't good, because when the state changed from removeTask(), it gets right back from the props with gDSFP, before the component can pass the changed state to it's childs. But i want to set the state from the props, because the childs need to get it. What could happen here is: the removeTask() fired, sets the new state, rerender, the childs get the new status as a prop, and when the update happens, deletes all the component, and it's child from the database. So what will be good:

• click happened, set new state
• render
• render childs, set they status prop to the state
• check if the status is "deleted"
• set state from props if it's changed, and rerender

How to earn this?

Answer 1

I have problem with your order to begin with. Your data depends on whats in the DB. You might delete from the state and the DB task failed. So why bother updating the state manually. Just listen and load your state from props that come from DB. when you delete from the DB, your props will be updated and re-render will occur. So basically if i were you , i would stick with

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>
      )
    }
}

from the above, you can notice i removed checkDeleted because i don't need to update my state. I can just rely on props. Remove set state status because i can just rely on props sttaus which btw tally or is in sync with DB.