使用react-native和redux构建一个简单的计数器应用程序，但每次计数器递增时，控制台日志打印出计数器* 2次？

Question

我做错了吗？

基本上，您在一个场景上按文字，下一个场景显示当前的计数值。每次单击第一页上的文本时，计数都会加1。

但是，每次登录this.props时，我都会看到它记录的次数与当前计数的次数相同。

//   src/index.js
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import { Router, Scene } from 'react-native-router-flux';
import * as actionCreators from './actions';
import configureStore from './store/configure-store';

import PageOne from './test/page-one';
import PageTwo from './test/page-two';

const store = configureStore();

const RouterWithRedux = connect(
  state => ({
    count: state.counter.count
  }),
  (dispatch) => ({
    actions: bindActionCreators(actionCreators, dispatch)
  }))(Router);

export default class Root extends Component {

  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key="root" hideNavBar={true}>
            <Scene key="pageOne" component={PageOne} initial={true} title="PageOne"/>
            <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
          </Scene>
        </RouterWithRedux>
      </Provider>
    );
  }
}

//   src/actions/counter.js
export const TYPES = {
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT'
};

export function increment() {
  return {
    type: TYPES.INCREMENT
  };
}

export function decrement() {
  return {
    type: TYPES.DECREMENT
  };
}

//   src/reducers/counter.js
import { TYPES } from '../actions/counterActions';

const initialState = {
  count: 0
};

export default function counter(state = initialState, action) {
  switch (action.type) {
    case TYPES.INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    case TYPES.DECREMENT:
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
}

//   Page One
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';

class PageOne extends Component {

  goToPageTwo() {
    Actions.pageTwo();
    this.props.actions.increment();
  }

  render() {
    console.log('page one', this.props);
    return (
      <View>
        <Text onPress={this.goToPageTwo.bind(this)}>This is PageOne!</Text>
      </View>
    );
  }
}

export default connect(state => ({ count: state.counter.count}))(PageOne);

//   Page Two
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';

class PageTwo extends Component {

  // componentWillReceiveProps(nextProps) {
  //   console.log('next props', nextProps.count);
  // }

  render() {
    console.log('page two', this.props);
    return (
      <View>
        <Text onPress={Actions.pageOne}>The current count is {this.props.count}</Text>
      </View>
    );
  }
}

export default connect(state => ({ count: state.counter.count}))(PageTwo);

有人可以帮助我理解这个吗？这里是我的回购链接的完整代码：https://github.com/281330/counter