Question

我有一个新的React Native应用程序 - 使用redux，reduxThunk和react-native-router

我有一个listItem组件，当用户点击它时会触发redux操作addBrandForUser()。

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);

以下是在上面的类中记录的一些输出。当在listItem上触发addBrandForUser()动作时，此序列开始。

看起来新数组正在被正确缩小，但由于例外情况，它会恢复到以前的状态。

更新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>
        );
    }
}

Answer 1

如果您向Action.main展示代码，将会有所帮助。但是我想动作创建者有点搞乱状态，或者有一些异步的东西你没有提到。

在这种情况下可以使用的一个小问题是将Actions.main调用推迟到以下内容中推迟：

setTimeout(() => Actions.main(), 0)

所以它在调度和状态更新完成后在下一个刻度上运行。

只是要清楚：这不是要走的路，这种错误通常是一种很好的代码味道，应该以不同的方式完成。 ;）

Answer 2

想象一下，订单无关紧要......而是首先触发您的Actions.main()，然后您尝试在尝试导航时更改数据。这很可能发生了什么。

Answer 3

虽然选择了答案。我只想发布我发现的内容。

结论是Action.main()最终会调用setState()方法。

也许react-native-router-flux应该像this way一样使用。

首先，Action.main()会从react-native-router-flux/blob/master/src/Actions.js L180致电this.callback。

this[key] =
  (props = {}) => {
    assert(this.callback, 'Actions.callback is not defined!');
    this.callback({ key, type, ...filterParam(props) });
  };

this.callback在react-native-router-flux/blob/master/src/Router.js L137中定义。

Actions.callback = (props) => {
  const constAction = (props.type && ActionMap[props.type] ? ActionMap[props.type] : null);
  if (this.props.dispatch) {
    if (constAction) {
      this.props.dispatch({ ...props, type: constAction });
    } else {
      this.props.dispatch(props);
    }
  }
  return (constAction ? onNavigate({ ...props, type: constAction }) : onNavigate(props));
};

然后onNavigate在L132中由renderNavigation(navigationState, onNavigate)传递。在L156中renderNavigation传递给<NavigationRootContainer>。 NavigationRootContainer导入NavigationExperimental。

从react-native-experimental-navigation/blob/master/NavigationRootContainer.js开始，我们可以onNavigate正好handleNavigation。在那里，您可以找到setState。

  handleNavigation(action: Object): boolean {
    const navState = this.props.reducer(this.state.navState, action);
    if (navState === this.state.navState) {
      return false;
    }
    this.setState({
      // $FlowFixMe - navState is missing properties :(
      navState,
    });

    if (this.props.persistenceKey) {
      AsyncStorage.setItem(this.props.persistenceKey, JSON.stringify(navState));
    }

    return true;
  }

'警告：setState（...）：在添加react-native-router-flux Action（）后，在现有状态转换期间无法更新

3 个答案: