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中的很多道具，这些道具都需要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'. 我做错了什么？

Answer 1

错误表明counter是boolean，您期待number。您可以在代码底部看到指定了 propTypes 的内容。

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

确保counter是number。

在mapStateToProps中应用参数

1 个答案: