ReactJS文本框无法输入，报错_this.props.setTextFilter不是函数

这个错误的核心原因很明确：你只完成了Redux state到组件props的映射（mapStateToProps），但没有把setTextFilter这个action creator绑定到组件的props上，所以当组件尝试调用this.props.setTextFilter时，它根本不存在，自然会抛出“不是函数”的类型错误。

解决方案：添加mapDispatchToProps映射action creator #

React-Redux的connect函数需要第二个参数来处理action的分发，你有两种简洁的实现方式：

方式1：手动定义mapDispatchToProps

import { connect } from 'react-redux';
import { setTextFilter } from '../actions/filters';

// 你的ExpListFilters组件代码...

const mapStateToProps = (state) => ({
  filters: state.filters
});

// 定义mapDispatchToProps，把action creator绑定到dispatch
const mapDispatchToProps = (dispatch) => ({
  setTextFilter: (text) => dispatch(setTextFilter(text))
});

// 务必把mapDispatchToProps作为第二个参数传给connect
export default connect(mapStateToProps, mapDispatchToProps)(ExpListFilters);

方式2：直接传入action creator对象（更简洁）

React-Redux会自动帮你把对象里的action creator绑定到dispatch，所以可以直接传包含action creator的对象：

import { connect } from 'react-redux';
import { setTextFilter } from '../actions/filters';

// 你的ExpListFilters组件代码...

const mapStateToProps = (state) => ({
  filters: state.filters
});

// 直接把{ setTextFilter }作为第二个参数传入connect
export default connect(mapStateToProps, { setTextFilter })(ExpListFilters);

确认组件内的其他代码没问题 #

你现有的onTextChanged方法和input的绑定逻辑是正确的：

onTextChanged = (e) => { 
  this.props.setTextFilter(e.target.value); 
};

<div className="in-group__item search-box"> 
  <input 
    placeholder="Search for your expenses" 
    className="text-input" 
    type="text" 
    value={this.props.filters.text} 
    onChange={this.onTextChanged}
  /> 
</div>

只要完成action creator的props映射，这个错误就会消失，搜索框的输入也能正常触发Redux状态更新了。

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