在 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
}
}
最佳答案
子组件在父组件渲染后不渲染的原因只有一个 - 它的 shouldComponentUpdate 方法,或者它与父组件之间的组件的方法返回 false。通常(特别是在 Redux 中),如果属性没有浅改变,shouldComponentUpdate 方法会被编写来阻止重新渲染。 Redux 依赖于您不改变状态,而是始终返回一个包含 reducer 中的任何更改的新对象,否则 shouldComponentUpdate 优化会导致意外行为。
问题可能是您正在修改深层状态而不是返回新对象吗?请参阅http://redux.js.org/docs/basics/Reducers.html了解更多详情。
关于javascript - react native /Redux : How to pass down updated state to child components every time state changes?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39279531/