首页 文章

React Native&Redux:为什么子组件不会在每次状态更新时重新呈现?

提问于
浏览
7

在React Native和Redux中,我有 <NavigationCardStack/> 作为根组件 . 每次状态更新时,redux-logger都会在下一个/新状态下正确更新 .

并且在状态更改之后,当新更新的状态是控制台登录子组件时,它不会控制日志记录更新的状态,而是控制台记录初始状态(在子组件 childPage.js 和日志记录中: render(){ console.log(this.props.state) return(...) ... ) .

可能是因为我错误地连接到Redux或者丢失了某些东西?因为,一切看起来都很完美,也很有意义 .

先感谢您!

Here are some snippets of my code:

这是我的reducer,子组件只会在这里记录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
  }
}

state = 表示状态以及如何将其传递给子组件

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

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

    <NavigationCardStack
      renderScene={this._renderScene}
      ...
    />

2 回答

  • 1

    可以this issue相关吗?看起来类似的是,即使redux状态发生变化, NavigationCardStack 也不会更新,并且 redux-logger 会记录更改 . 我无法从您的代码示例中判断出来,但是测试这种情况的一种方法可能是将孩子或一个孩子直接送到您的redux商店,而不是让 NavigationCardStack 将商店状态作为道具传递?上面的github问题也有一些hacky变通方法,但我在那里帮助很多 .

  • 2

    这基本上是在黑暗中刺伤并完全基于我们在注释中的对话,但是_renderScene方法是否绑定到构造函数中的组件?例如:

    constructor (props) {
      super(props)
      ...
      this._renderScene = this._renderScene.bind(this);
    }
    

相关问题