前提・実現したいこと
react、redux、react-reduxを使ってデータ抽出アプリを作っています。
コンポーネントの検索ボタン押下時、actionにて定義した関数を実行させたいです。
まずは、コンポーネントとコンテナが繋がっているかを確認したところpropsが空っぽでした。
問題点を教えていただけないでしょうか。
発生している問題・エラーメッセージ
コンポーネントとコンテナは、connectにて繋いでいるのですが、以下エラーが発生します。
TypeError: _this.props.onBtnSearchClick is not a function DataExtract._this.onBtnSearchClick src/components/DataExtract.js:52 // 検索ボタン押下イベントハンドラー onBtnSearchClick = (event) => { console.log(this.props); // データ抽出実行 this.props.onBtnSearchClick(); // データ表示エリア表示
該当のソースコード
■components/DataExtract.js:抜粋 import React, { Component } from 'react'; import { RaisedButton } from 'material-ui'; class DataExtract extends Component { constructor(props) { super(props); this.state = { }; } componentDidMount() { } // 検索ボタン押下イベントハンドラー onBtnSearchClick = (event) => { console.log(this.props); // データ抽出実行 this.props.onBtnSearchClick(); }; render() { return ( // 検索エリア <div> <div style={{ display: "inline-block", verticalAlign: "top", marginTop: "5px" }}> <RaisedButton label="検索" backgroundColor="#2962FF" style={{ width: "85px" }} labelStyle={{ color: "#fff", fontWeight: "bold", fontSize: "14px" }} icon={<CachedIcon color={"#fff"} style={{ marginLeft: "0px" }} />} labelPosition="after" onClick={this.onBtnSearchClick.bind(this)} /> </div> </div> ); } } export default DataExtract; ■container/containerDataExtract.js import { connect } from 'react-redux'; import DataExtract from '../components/DataExtract'; import { getTrnSales } from '../actions/actionDataExtract'; const mapStateToProps = (state) => { const length = state.reducerDataExtract.length; const currentState = state.reducerDataExtract[length -1]; console.log(currentState); return { items: currentState.items } }; const mapDispatchToProps = (dispatch) => { return { onBtnSearchClick() { dispatch(getTrnSales()); } }; }; const containerDataExtract = connect( mapStateToProps, mapDispatchToProps )(DataExtract); export default containerDataExtract;
試したこと
DataExtract.jsにて検索ボタンonClick={this.onBtnSearchClick.bind(this)}を押下したところpropsが空でした。
reduxの構成要素(アクション、アクションクリエーター、リデューサ)、および createStore しているところのソース(index.jsですかね?)も載せたほうがよいかもしれません。
回答1件
あなたの回答
tips
プレビュー