6

ボタンクリックからアクションをディスパッチしようとしています。

コンポーネントを作成しました。プロバイダーによってコンポーネントに渡されるストアに接続します。しかし、私はエラーが発生します:

キャッチされていない TypeError: this.doSearchClick は関数ではありません

私は自分の輸入品を持っています：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import action_doSearch from '../../actions/searchActions'

私のコンポーネント:

class SearchForm extends React.Component {
  constructor(props, doSearchClick) {
    super(props);
    this.search = this.search.bind(this);
    this.doSearchClick = doSearchClick;
  }

  search() {
    this.doSearchClick('bla bla from search');
  }

  render() {
    return(
      <div>
        <button onClick={this.search}>Search</button>
      </div>
    );
  }
}

これが必要かどうかわからない：

SearchForm.propTypes = {
  doSearchClick: PropTypes.func.isRequired
};

最後にconnect：

const mapStateToProps = (state) => {
  return {
    state
  }
};

const mapDispatchToEvents = (dispatch) => {
  return {
    doSearchClick: (searchCriteria) => {
      dispatch(action_doSearch(searchCriteria));
    }
  };
};
const SearchFormConnected = connect(
  mapStateToProps,
  mapDispatchToEvents
)(SearchForm);

最上位では、プロバイダーを介してストアを渡します。

import { Provider } from 'react-redux'

const finalCreateStore = compose(
   applyMiddleware(
      middleware,
      thunk
   ),
   DevTools.instrument()
)(createStore);

const store = finalCreateStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    ....

また、コンテキストを介してストアにアクセスし（機能せず、廃止される可能性があります）、@connect属性を使用してこれを達成しようとしました（同様のエラーが発生しました）。

4

2 に答える 2

2

doSearchClick will be passed in the props object. So you need to type props.doSearchClick to access it.

于 2016-02-24T12:32:06.667 に答える
1

これ：

SearchForm.propTypes = {
   doSearchClick: PropTypes.func.isRequired
};

SearchForm コンポーネントが doSearchClick という名前の関数を親から props として取得することを期待していることを意味します。

父親がこの小道具を渡した場合、子供は次の方法でアクセスする必要があります

props.doSearchClick
于 2016-02-24T12:42:32.337 に答える