如何根据数据更新状态之前和之后调用函数-React-Redux

时间:2019-04-13 10:17:11

标签: react-redux redux-saga

我在下拉列表中选择了传奇,必须使用相同的组件。称为sagas的唯一事情是不会在saga调用之前更新设置状态,因此该组件永远不会更新数据。

            recievedChangeValue=(selectVal)=>{
                console.log(selectVal)
                if(selectVal==='Yearly'){
                     this.props.getYearlySales() **//call to saga**
                     this.setState({salesData:this.props.yearlySales}) **//it updates before the called saga ends**                         
                 }
                if(selectVal==='Decade'){ 
                    this.props.getSales()**//call to saga**
                    this.setState({salesData:this.props.dataSales})   **//it updates before the called saga ends**                                           
                }
            }

我知道回调函数,但是状态必须仅在saga调用之后才更新。自从过去的一天以来,我一直在努力处理它,我不知道该做什么。感谢您的任何帮助。请让我知道我要去哪里。

2 个答案:

答案 0 :(得分:0)

您迫不及待要完成传奇,因为this.props.getSales并不是真正的传奇,它只是在分派动作。

在分派动作时,基于此动作可能会在您的应用程序中发生某些事情,但是模式的工作方式是“分派器”对此一无所知。

saga与组件通信的唯一常见方法是更改​​redux状态。因此,与其在回调中更改本地状态,不如等待dateSales道具更改,然后使用getDerivedStateFromProps更新本地状态。

static getDerivedStateFromProps(props) {
  return {salesData: props.dataSales}
}

有关使用getDerivedStateFromProps的更多信息,请参见

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

答案 1 :(得分:0)

 recievedChangeValue=(selectVal)=>{
this.setState({selectedSalesData:selectVal},
  ()=>{
    if(selectVal==='Yearly'){
        this.props.getYearlySales() 
    }
    if(selectVal==='Decade'){ 
        this.props.getSales()
    }
  }
)

}

我在渲染中写的以下内容

   let SalesData=this.handleSalesData(selectedSalesData)//calls on selecteddata and it works like a charm