javascript - 在 mapStateToProps 中应用参数

Question

这是一个简单的组件，显示一个计数器和两个用于递增/递减计数器的按钮。

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>{this.props.counter}</h1>
        <button type="button" onClick={this.props.increment}>
          increment
        </button>
        <button type="button" onClick={this.props.decrement}>
          decrement
        </button>
      </div>
    );
  }    
}

const mapStateToProps = state => ({
  counter: state.counter
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: "INCREMENT" }),
  decrement: () => dispatch({ type: "DECREMENT" })
});

App.propTypes = {
  counter: PropTypes.number.isRequired,
  increment: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

这是一个最小的示例，但在现实生活中，我需要 mapStateToProps 中的很多 Prop ，所有这些都需要 state 参数。我试图将 state 参数应用于 mapStateToProps 对象返回中的所有值。像这样的事情:

const mapStateToProps = state => ({
  user: getCurrentUser(state),
  page: getPage(state),
  // ... f(state)
});

我尝试过的:

const mapStateToProps = state =>
  _.mapValues(
    {
      counter: state => state.counter
    },
    state
  );

我收到此错误:proxyConsole.js:56 警告:失败的 Prop 类型:无效 Prop counter类型boolean提供给“App”，预期为“号”。我做错了什么？

Answer 1

该错误表明 counter 是一个 boolean，而您需要一个number。正如您在代码底部所看到的，其中指定了 propTypes。

App.propTypes = {
    counter: PropTypes.number.isRequired,
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired
};

确保计数器是一个数字。