Question

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

    
    
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（））
道具的状态（gDSFP（））
渲染
已渲染的子对象（在render（）内部触发了task（））
更新（componentDidUpdate（））

这是不好的，因为当状态从removeTask（）更改时，它将在组件可以将更改后的状态传递给其子项之前从gDSFP道具返回。但是我想从道具设置状态，因为孩子们需要得到它。这里可能发生的事情是：触发removeRemoveTask（），设置新状态，重新渲染，子级将新状态作为prop，并且当更新发生时，删除所有组件，并将其从数据库中删除。那有什么好处：

点击发生，设置新状态
渲染
渲染孩子，将他们的身份设置为州
检查状态是否为“已删除”
从道具设置状态（如果已更改），然后重新渲染

如何赚钱？

Answer 1

我从您的订单开始有问题。您的数据取决于数据库中的内容。您可能会从状态中删除，并且数据库任务失败。那么，为什么要手动更新状态呢？只需从DB发出的道具中监听并加载状态即可。当您从数据库中删除时，您的道具将被更新并重新渲染。所以基本上，如果我是你，我会坚持

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，因为我不需要更新状态。我可以依靠道具。删除设置状态，因为我只能依靠道具sttaus，提示道具还是与数据库同步的。

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

1 个答案: