React Redux函数未传入参数：搜索组件传参报错问题

看起来你在实现React搜索组件时，遇到了点击按钮传递输入值到Redux状态的问题。结合你给出的代码片段，我梳理了几个最可能的错误点，以及对应的解决办法：

1. 未正确获取react-bootstrap-typeahead的输入值 #

你定义了this.setRef但代码没写完，首先要注意：react-bootstrap-typeahead的组件实例不能直接通过ref拿value，它提供了专门的方法来获取输入内容：

• 如果要获取用户选中的选项（单选场景）：

  onSearch = () => {
    const selectedItems = this.setRef.getSelected();
    // 单选的话取第一个元素，多选可以直接传数组
    const searchValue = selectedItems.length ? selectedItems[0] : '';
    this.props.searchInput(searchValue);
  }
  

• 如果要获取输入框里的原始文本（即使没选中任何选项）：

  onSearch = () => {
    const inputDom = this.setRef.getInputElement();
    const searchValue = inputDom.value.trim();
    this.props.searchInput(searchValue);
  }
  

2. Redux Action/Reducer未正确处理数据 #

检查你的searchInput action是否生成了正确的action对象，以及reducer是否正确更新状态：

正确的Action示例 #

// actions/index.js
export const searchInput = (value) => ({
  type: 'UPDATE_SEARCH_INPUT', // 确保type唯一且和reducer匹配
  payload: value
});

正确的Reducer示例 #

// reducers/searchReducer.js
const initialState = {
  searchText: ''
};

export default function searchReducer(state = initialState, action) {
  switch(action.type) {
    case 'UPDATE_SEARCH_INPUT':
      return {
        ...state,
        searchText: action.payload
      };
    default:
      return state;
  }
}

别忘了在store中注册这个reducer哦！

3. connect方法配置错误 #

确保你正确绑定了action creator到组件props：

// 两种写法都可以
// 写法1：对象简写
const mapDispatchToProps = {
  searchInput
};

// 写法2：手动dispatch
// const mapDispatchToProps = dispatch => ({
//   searchInput: (val) => dispatch(searchInput(val))
// });

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

4. 额外调试建议 #

• 在onSearch里加console.log，打印this.setRef、searchValue和this.props.searchInput，确认值是否正确，action函数是否存在。
• 用Redux DevTools查看action是否被正常派发，状态是否更新。

完整修复后的代码示例 #

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 inputDom = this.setRef.getInputElement();
    const searchValue = inputDom.value.trim();
    
    if (searchValue) {
      this.props.searchInput(searchValue);
    }
  }

  render() {
    return (
      <div>
        <Typeahead
          ref={(ref) => this.setRef = ref}
          placeholder="输入搜索内容..."
          // 这里可以添加你的options等其他props
        />
        <button onClick={this.onSearch}>搜索</button>
      </div>
    );
  }
}

Search.propTypes = {
  searchInput: PropTypes.func.isRequired
};

const mapDispatchToProps = {
  searchInput
};

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

内容的提问来源于stack exchange，提问作者arunmmanoharan