gpt4 book ai didi

javascript - react /归零 : modified state is not updated in view

转载 作者:行者123 更新时间:2023-11-29 21:27:04 27 4
gpt4 key购买 nike

在我使用 redux 的 native react 应用程序中,reducers 似乎工作正常,但 UI 不会根据状态修改进行更新。

这是我的 reducer :

const initialState = {
userId: 1,
userName: "nobody",
showIntroOnNextStart: true
}

export default function reducer(state = initialState, action) {

switch(action.type) {
case 'INCREMENT':
let newState = {
...state,
userId: state.userId + 1
};
console.log(newState);
return newState;

}
return state;
}

它将通过以下方式导出和导入:

import userProfile from './userProfile'

export { userProfile }

这是我的连接方法:

export default connect(state => ({
state: state.userProfile
}),
(dispatch) => ({
actions: bindActionCreators(actions, dispatch)
})
)(ApplicationContainer);

所以最终状态是这样的:

enter image description here

在我的应用程序组件的渲染方法中,我将状态传递给子组件:

render() {
const { state, actions } = this.props;
return ....lots of scenes...
<Scene key="home" component={HomeScreen} title="Home" state={state} {...actions} />

在特定的场景组件中,我使用这样的状态:

render(){
const { state, decrement, increment } = this.props;

return (
<View {...this.props} style={styles.container}>

<Text>{state.userId}</Text>

<Button onPress={increment}>Increment</Button>
</View>
);
}

增量操作按预期正常工作,每个 console.log-Output 都显示一个具有正确增量值的新状态对象。

但是 View 不会更新。在 reducer 函数中,状态按预期工作并在每次调用时递增 userId。但在渲染函数中,状态对象值从一开始就保持不变。

这里可能出了什么问题?

更新

当我从 react-native-router-flux 中删除这个 Router-Stuff 时,一切正常。状态将是相同的实例并将被更新。但是一旦将组件封装到路由器的场景中,就不会发生状态更新

最佳答案

从我使用 Redux 的有限时间来看,不渲染的问题通常是对象的引用没有改变。如果你有一个深对象,你需要做深拷贝。我个人喜欢对 React 中的任何状态使用 immutable.js。

您可以尝试缩小问题范围的另一件事是在按增量后调用组件上的 this.forceUpdate()。如果它更新了 View ,那将使您更接近于找出问题所在。

关于javascript - react /归零 : modified state is not updated in view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37241194/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com