如何在使用 redux 分派操作后导航到另一个屏幕

Question

通过 API 调度创建新对象的操作后，它 returns 它在 mapStateToProps 上。在 componentDidUpdate 回调中，我能够将对象映射到道具并打开传递它的详细信息屏幕。问题是，当我返回并尝试创建一个新对象（只需填写表格）时，它会不断调用 componentDidUpdate 使用最近在 props 中创建的对象（因为我正在使用用户键入的内容设置状态并且 this.props.deck 还在里面。

是否有另一个生命周期，我无法在 props 或其他逻辑中得到任何垃圾？

我的调度操作：

this.props.createDeck(deckToBeCreated)  // dispatch an action to create a deck

我的部分减速器：

case ADD_NEW_DECK_SUCCESS: 
     return {
         ...state,
         deck: action.deck,
     }

如果成功，我将在此处获得 API 创建的牌组对象：

function mapStateToProps({specificDeckReducer}) {
    return {
        deck: specificDeckReducer.deck
    }
}


 componentDidUpdate() { // THE PROBLEM IS HERE.
        const { deck } = this.props
        if (deck != null && deck.id) {
            this.showDeckDetail(deck)
            this.reset()
        }
    }

Answer 1

您可以设置 componentDidUpdate() 使其仅在您获得更新的 prop 时运行。

componentDidUpdate(prevProps){
   if(prevProps.deck !== this.props.deck){
     //do something
   }
}

这样生命周期事件就不会一直触发。所以你应该能够自由导航而不用担心组件事件。

如何在使用 redux 分派操作后导航到另一个屏幕

How to navigate to another screen after dispatch an action using redux

react-native

redux

redux-thunk

react-redux