javascript - 我需要使用什么生命周期 Hook ？ - react

Question

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

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

发生了什么:日志的顺序如下:

• 状态已更改(removeTask())
• 来自 props 的状态 (gDSFP())
• 渲染
• 渲染的子级(tasks() 在 render() 内触发)
• 更新(componentDidUpdate())

这不好，因为当状态从removeTask()更改时，它会在组件将更改后的状态传递给其子组件之前立即使用gDSFP从 Prop 中返回。但我想从 Prop 中设置状态，因为 children 需要获取它。这里可能发生的是:removeTask() 被触发，设置新状态，重新渲染，子组件将新状态作为 Prop 获取，当更新发生时，从数据库中删除所有组件及其子组件。那么什么是好的:

• 点击发生，设置新状态
• 渲染
• 渲染子项，将其状态属性设置为状态
• 检查状态是否为“已删除”
• 如果状态发生变化，则通过 props 设置状态，并重新渲染

如何赚取这个？

Answer 1

首先我对您的订单有疑问。您的数据取决于数据库中的内容。您可能会从状态中删除，并且数据库任务失败。那么为什么还要手动更新状态呢？只需聆听来自数据库的 props 并加载您的状态即可。当您从数据库中删除时，您的 Prop 将被更新并重新渲染。所以基本上如果我是你，我会坚持

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

从上面，您可以注意到我删除了 checkDeleted 因为我不需要更新我的状态。我只能依靠 Prop 。删除设置状态状态，因为我只能依赖 Prop 状态，顺便说一句，它与数据库同步或同步。