首页 文章

React Native / Redux：每次状态更改时如何将更新后的状态传递给子组件？

提问于
浏览 次
0

在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 单独记录日志：

enter image description here

并且 this.props 记录通过Redux传递的实际状态：

enter image description here

在子组件 childPage.js 中，我只是这样记录，并且它正确记录了传递的道具（ _handleNavigate 和 state ），但是 state 只是继续表示初始状态，即使它得到更新：

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

    return (

先感谢您！

EDIT

这是我的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
  }
}
javascript reactjs react-native redux react-jsx

2 回答

  • 0

    父组件渲染后子组件不呈现的原因只有一个 - 它的shouldComponentUpdate方法，或者它与父组件之间的组件中的组件返回false . 通常（特别是使用Redux）如果属性没有浅层更改，则会编写shouldComponentUpdate方法来阻止重新呈现 . Redux依赖于您不改变状态，而是始终返回一个新对象，其中包含来自reducer的任何更改，否则shouldComponentUpdate优化会导致意外行为 .

    问题可能是您正在修改深度状态而不是返回新对象吗？有关详细信息，请参阅http://redux.js.org/docs/basics/Reducers.html .

    回复于
  • 1

    第一个猜测是你的NavigationCardStack没有重新渲染，因为它认为呈现给它的道具没有变化 . 尝试强制重新呈现（forceUpdate）并查看会发生什么 .

    回复于

相关问题