mapStateToPropsでの引数の適用

Question

これは、カウンターとそれを増減する2つのボタンを表示する単純なコンポーネントです。

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

これは、最小限の例ですが、実際の生活の中で、私はすべてがstate引数を必要とすること、mapStateToPropsで小道具の多くを必要とします。 mapStateToPropsオブジェクトリターンのすべての値にstate argを適用しようとしています。私が試した何

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と予想しています。コードの一番下に表示されているように、propタイプが指定されています。

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

はcounterがnumberであることを確認してください。