Question

我有一个搜索组件，可以捕获按钮上的值。我使用Redux进行状态管理，当我传入数据时，我收到错误。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Typeahead } from 'react-bootstrap-typeahead';
import { searchInput } from '../../actions/index';

class Search extends Component {
  constructor(props) {
    super(props);
    this.setRef = null;
  }

  onSearch = () => {
        const value = this.setRef.instanceRef.state.text;
        console.log(value);
        this.props.searchInput(value);
  };

  render() {

    return (
      <form className="filter-form form-inline" role="search">
        <div className="form-group searchBar">
          <label className="filter-label">Search:</label>
          <Typeahead
            bsSize={ 'sm' }
            options={ this.props.options }
            placeholder={ this.props.placeholder }
            emptyLabel={ this.props.emptyLabel }
            ref={ a => this.setRef = a }
          />
          <span
            role={ 'search' }
            className="glyphicon glyphicon-search filter-label"
            id="searchButton"
            onClick={ this.onSearch }
          />
        </div>
      </form>
    );
  }
}

Search.propTypes = {
  options: PropTypes.array,
  placeholder: PropTypes.string,
  emptyLabel: PropTypes.node,
};
Search.defaultProps = {
  options: ['red', 'green', 'blue', 'orange', 'yellow'],
  placeholder: 'Enter a placeholder',
  emptyLabel: null,
};

export default connect(null, searchInput)(Search);

我通过refs获取值并通过reducers传递该值，因此我可以将该值传递给调用此组件的父组件，将其作为参数传递给数据库以获得服务器端过滤。

这是我的行动。

export const searchInput = event => ({
  type: ACTION_TYPES.SEARCH_INPUT,
  data: event,
});

这是我的减速机。

import * as ACTION_TYPES from '../consts/action_types';

const initialState = {
  searchTerm: '',
};

export const searchReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPES.SEARCH_INPUT:
      return {
        ...state,
        searchTerm: action.data,
      };
    default:
      return state;
  }
};

这是我得到的错误。

Uncaught TypeError: n.props.searchInput is not a function
    at n.onSearch (Search.js:16)
    at Object.R (react-dom.production.min.js:26)
    at Object.invokeGuardedCallback (react-dom.production.min.js:25)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:25)
    at $ (react-dom.production.min.js:30)
    at ee (react-dom.production.min.js:32)
    at ne (react-dom.production.min.js:32)
    at Array.forEach (<anonymous>)
    at Z (react-dom.production.min.js:31)
    at se (react-dom.production.min.js:34)

有人可以指出我的错误吗？

Answer 1

我认为connect调用需要将对象中的调度函数传递给mapDispatchToProps：

export default connect(null, { searchInput })(Search);

Answer 2

export default connect（null，{searchInput}）（Search）;

函数没有传入参数 - React Redux

2 个答案: