React Native/Redux:每次状态更改时如何将更新的状态传递给子组件? [英] React Native/Redux: How to pass down updated state to child components every time state changes?

问题描述

在 React Native 和 Redux 中，我使用 作为根组件并使用 _renderScene() 渲染路由.但似乎每当根组件重新渲染状态更新时，它不会在每次更新时传递状态，因为我将 console.log(this.props) 放在子组件中并记录传递的状态，但它只记录一次，这是应用程序第一次启动，即使根组件随着状态更新重新呈现，也不会记录.

In React Native and Redux, I am using <NavigationCardStack/> as the root component and render routes with _renderScene(). But seems like whenever the root component re-renders with state update, it does not pass the state down every update, because I put console.log(this.props) in the child component and logs the passed state, but it only logs once and that is the first time the app starts up and never logs after even if the root component re-renders with the state update.

为什么每次状态改变时不传递更新的状态?为什么在根组件重新渲染时子组件不重新渲染?

Why isn't it passing down the updated state every time the state changes? And why doesn't the child component re-render whenever the root component does?

这是我的设置:

  _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 传递的实际状态:

And this.props logs the actually state passed down via Redux:

在子组件 childPage.js 中，我只是像这样记录，它记录传递下来的道具(_handleNavigate 和 state>) 正确，但 state 只是继续表示初始状态，即使它被更新:

And in the child component childPage.js, I am simply logging like so, and it logs the props passed down (_handleNavigate and state) correctly but the state just continues to represent initial state even if it gets updated:

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

    return (

先谢谢你！

编辑

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

This is my reducer and the child component would just log the initialState here even though other properties have been added and updated:

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

并像这样连接到根组件:

And connected to the root component like so:

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
  }
}

推荐答案

在父组件渲染后子组件不渲染的原因只有一个 - 它的 shouldComponentUpdate 方法，或者来自它和父组件之间的一个组件，有返回错误.通常(尤其是 Redux)shouldComponentUpdate 方法被编写来阻止重新渲染，如果属性没有浅改变.Redux 依赖于你不改变状态，而是总是返回一个新对象，并从你的减速器中进行任何更改，否则 shouldComponentUpdate 优化会导致意外行为.

There is only one reason that a child component does not render after a parent render - its shouldComponentUpdate method, or one from a component between it and the parent, has returned false. Often (particularly with Redux) shouldComponentUpdate methods are written to block the rerender if the properties haven't changed shallowly. Redux relies on you not mutating state, but instead always returning a new object with any changes from your reducer, otherwise the shouldComponentUpdate optimisation causes unexpected behaviour.

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

Could the problem be that you are modifying deep state rather than returning new objects? See http://redux.js.org/docs/basics/Reducers.html for more details.

这篇关于React Native/Redux:每次状态更改时如何将更新的状态传递给子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！