React Native / Redux：每次狀態更改時如何將更新后的狀態傳遞給子組件？

Question

在React Native和Redux中，我使用<NavigationCardStack/>作為根組件，並使用_renderScene()渲染路由。 但是似乎每當根組件通過狀態更新重新渲染時，它都不會在每次更新時都傳遞狀態，因為我將console.log(this.props)放在子組件中並記錄了傳遞的狀態，但是只記錄了一次這是該應用程序首次啟動，並且即使根組件隨狀態更新而重新發布，也永遠不會登錄。

為什么每次狀態更改時它都不會傳遞更新的狀態？ 為何每當根組件執行操作時子組件都不會重新渲染？

這是我的設置：

  _renderScene (props) {
    const { route } = props.scene

    return (
      <route.component _handleNavigate={this._handleNavigate.bind(this)} state={this.props}/>
    )
  }

    <NavigationCardStack
      direction='horizontal'
      navigationState={this.props.navigation}
      onNavigate={this._handleNavigate.bind(this)}
      renderScene={this._renderScene}
      renderOverlay={this.renderOverlay}
      style={styles.container}
    />

在_renderScene ，僅props記錄：

並且this.props記錄通過Redux傳遞的實際狀態：

在子組件childPage.js ，我只是像這樣記錄日志，它正確記錄了傳遞的道具（ _handleNavigate和state ），但是即使更新了state仍然繼續代表初始狀態：

  render() {
    console.log(this.props.state)

    return (

先感謝您！

編輯

這是我的簡化器，即使添加和更新了其他屬性，子組件也只會在此處記錄initialState：

const initialState = {
  meetUp: false,
}

function itemReducer(state = initialState, action) {
  switch(action.type) {


    case ITEM_QUANTITY:
      return {
        ...state,
        quantity: action.quantity
      }

    case ITEM_PRICE:
      return {
        ...state,
        price: action.price
      }

    case ITEM_MEET_UP:
      return {
        ...state,
        meetUp: action.meetUp
      }

     default:
       return state
  }
}

export default itemReducer

並像這樣連接到根組件：

function mapStateToProps(state) {
  return {
    itemInfo: state.itemReducer,
    ...
  }
}

export default connect(
  mapStateToProps,
  {
    itemQuantity: (value) => itemQuantity(value),
    itemPrice: (value) => itemPrice(value),
    itemMeetUp: (value) => itemMeetUp(value),
  }
)(NavigationRoot)

通過以下操作：

export function itemMeetUp(value) {
  return {
    type: ITEM_MEET_UP,
    meetUp: value
  }
}

export function itemQuantity(value) {
  return {
    type: ITEM_QUANTITY,
    quantity: value
  }
}

export function itemPrice(value) {
  return {
    type: ITEM_PRICE,
    price: value
  }
}

Answer 1

子組件在父渲染之后不渲染的原因只有一個-它的shouldComponentUpdate方法或它與父組件之間的組件中的一個返回了false。 如果屬性的變化不是很淺，通常（尤其是在Redux中）應該編寫componentComponentUpdate方法來阻止重新渲染。 Redux依賴於您不改變狀態，而是始終返回來自化簡器的任何更改的新對象，否則，shouldComponentUpdate優化會導致意外的行為。

問題可能在於您正在修改深層狀態而不是返回新對象嗎？ 有關更多詳細信息，請參見http://redux.js.org/docs/basics/Reducers.html 。

Answer 2

第一個猜測是您的NavigationCardStack沒有重新渲染，因為它認為呈現給它的道具沒有改變。 嘗試強制重新渲染（forceUpdate），然后看看會發生什么。