我有一个新的 React Native 应用程序 - 使用 redux、reduxThunk 和 react-native-router
addBrandForUser()我有一个 listItem 组件，当用户单击它时会触发 redux 操作。
class ListItem extends Component {
constructor(props) {
super(props);
this.onAddClick = this.onAddClick.bind(this);
}
onAddClick() {
let {addBrandForUser, brand} = this.props;
addBrandForUser({userId: null, brand: brand});
}
render() {
let {brand} = this.props;
return (
<Text style={styles.brandSelectItem}
onPress={this.onAddClick}>
{brand.title}
</Text>
)
}
}
单击会触发以下操作：
export const addBrandForUser = ({userId, brand}) => {
return (dispatch) => {
dispatch({
type: types.AddBrandToUser,
payload: {userId, brand}
});
dispatch({
type: types.SelectBrand,
payload: brand
});
//Actions.main();
}
}
然后在所有正确的减速器中对其进行评估。这一切都有效并且正确链接 - 所有调试器都到达了我期望它们的位置。
但是，我得到了Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount例外....但前提是该Actions.main();行未注释。
我的路由器配置如下：
export default class RouterComponent extends Component {
render() {
return (
<Router>
<Scene key="main" component={Main} title="Butler" hideNavBar={true} initial/>
<Scene sceneStyle={{paddingTop: 60}} key="addBrand" component={AvailableBrands} title="Brands" hideNavBar={false}/>
</Router>
);
}
}
我注意到的一件事是，在SelectBrand调度操作后，reducers 正确更新，并且在导航回 Actions.main() 时视图会相应更新。但是，在调度AddBrandToUser操作之后，reducer 获得了正确的有效负载并正确地返回了新对象，但视图没有相应地更新。
应该更新的视图如下
class UserBrandList extends Component {
renderBrands(brand) {
return <BrandSelectItem brand={brand}/>;
}
render() {
let {flex1} = sharedStyles;
console.log('Render() ... Props.Brands: ');
console.log(this.props.brands);
return (
<ScrollView style={flex1}>
<ListView
enableEmptySections={true}
dataSource={this.props.brands}
renderRow={this.renderBrands.bind(this)}
/>
</ScrollView>
)
}
}
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
const mapStateToProps = state => {
console.log('MapStateToProps() .... state.userBrands: ');
console.log(state.userBrands);
return {
brands: ds.cloneWithRows(state.userBrands)
}
};
export default connect(mapStateToProps)(UserBrandList);
下面是在上述类中记录的一些输出。此序列addBrandForUser()在 listItem 上触发操作时开始。
看起来新数组正在正确减少，但由于异常而恢复到以前的自我。
更新 1：
这是addBrandForUser()命中的减速器。
export default (state = [], action) => {
switch (action.type) {
case types.RefreshUserBrands:
return action.payload;
case types.AddBrandToUser:
let newArray = [...state, action.payload.brand];
console.log('New Reduced Array: ' );
console.log(newArray);
return newArray;
default:
return state;
}
}
更新 2：
Actions是 react-native-router-flux 提供给我的一个类：
import {Actions} from 'react-native-router-flux';
<Scene key="main" component={Main} title="Butler" hideNavBar={true} initial/>
Actions.main()据我了解，scene使用钥匙的路线main
附加到Main路由的组件如下：
export default class Main extends Component {
constructor(props) {
super(props);
this.openSideMenu = this.openSideMenu.bind(this);
this.closeSideMenu = this.closeSideMenu.bind(this);
}
closeSideMenu() {
this._drawer.close()
}
openSideMenu() {
this._drawer.open()
}
render() {
return (
<View style={styles.container}>
<ButlerHeader openDrawer={this.openSideMenu}/>
<Drawer
type="overlay"
ref={(ref) => {this._drawer = ref }}
content={<SideMenu closeDrawer={this.closeSideMenu} />}
openDrawerOffset={0.2}
drawerpanCloseMask={0.2}
closedDrawerOffset={-3}
tweenHandler={(ratio) => ({
main: { opacity:(2-ratio)/2 }
})}
/>
</View>
);
}
}