如何在之前和之后调用函数，具体取决于数据更新状态-反应-redux

Question

我有一个下拉菜单，选择调用 saga 并且必须使用相同的组件。传奇被称为唯一没有发生的事情是设置状态在 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 调用之后才能更新状态。从昨天开始，我一直在努力，我不知道必须做什么。任何帮助，不胜感激。请告诉我我哪里出错了。

Answer 1

你不能在组件中等待传奇完成，因为this.props.getSales并不是真正调用传奇 - 它只是调度一个操作。

当调度操作时，您的应用中可能会基于此发生某些事情，但模式的工作方式是"调度程序"不知道这些。

saga 与组件通信的唯一常见方式是通过更改 redux 状态。因此，您不必在回调中更改本地状态，而是必须等待dateSalesprop 更改，然后使用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-可能-不需要-派生状态.html#何时使用派生状态

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

Answer 2

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