javascript - react native /Redux : How to pass down updated state to child components every time state changes?

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 ，我只是像这样进行日志记录，它正确地记录了传递下来的 Prop ( _handleNavigate 和 state )，但 state即使它被更新也只是继续代表初始状态:

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

    return (

提前谢谢您!

编辑

这是我的 reducer ，即使已添加和更新其他属性，子组件也只会在此处记录初始状态:

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 中)，如果属性没有浅改变，shouldComponentUpdate 方法会被编写来阻止重新渲染。 Redux 依赖于您不改变状态，而是始终返回一个包含 reducer 中的任何更改的新对象，否则 shouldComponentUpdate 优化会导致意外行为。

问题可能是您正在修改深层状态而不是返回新对象吗？请参阅http://redux.js.org/docs/basics/Reducers.html了解更多详情。