javascript - 在mapStateToProps中应用参数

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

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中需要很多道具，而所有道具都需要state arg。我试图将state arg应用于mapStateToProps对象返回中的所有值。像这样：

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

我试过的

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

我收到此错误：proxyConsole.js:56 Warning: Failed prop type: Invalid prop计数器of type布尔值supplied to 'App', expected 'number'.
我究竟做错了什么？

最佳答案

该错误表明counter是boolean，并且您期望使用number。如您所见，在代码底部指定了propTypes。

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

确保counter是number。

关于javascript - 在mapStateToProps中应用参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45870074/