React/Redux 搜索栏不工作

Question

我的 TODO 列表中有一个搜索栏：

import React, { Component } from 'react';
import { FilterTasks } from '../../redux/actions/searchbar';
import reducers from '../../redux/reducers';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class SearchBar extends Component {
    render() {
      const {search, value} = this.props;

      return (
          <input
            className="form-control"
            placeholder = "Filter Tasks"
            onChange={(e) => FilterTasks(e.target.value)}
            value={value} />
      );
    }
  } 

  function mapStateToProps({tasks}) {
    return {value: tasks.value};
  }

  function mapDispatchToProps(dispatch) {
    return bindActionCreators({FilterTasks}, dispatch);
  }

  export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

这是我要过滤的操作：

export const SEARCH = 'SEARCH';

export function FilterTasks(value) {
  return {type: SEARCH, value};
}

我的搜索栏缩减器：

import {SEARCH} from '../actions/searchbar';

const initialState = {}

export default function SEARCHREDUCER(state = initialState, action) {
  switch(action.type) {
    case SEARCH: {
      const {value} = action;
      const tasks = state.contents.filter((val) => val.includes(value));
      return {...state, value, tasks};
    }
    default:
      return state;
  }
}

我的索引减速器：

import { combineReducers } from 'redux';
import SEARCHREDUCER from '../reducers/searchbar';

const TaskReducer = (state = [] ,action) => {
    switch (action.type){
    case 'ADD_TASK':
    state = state.concat(action.payload);
    break;
    case 'DELETE_TASK':
  state = state.tasks.filter(task => task !== action.payload)
    break;
    }
    return state;
},

reducers = combineReducers({
    tasks : TaskReducer,
    SEARCHREDUCER 
});

export default reducers;

我的 TasksList class 应在其中呈现过滤后的列表：

import React, { Component } from 'react';
import {connect} from 'react-redux';
import Task from '../task'

class TaskList extends Component {
    render(){
        return(
            <table>
                <thead>
                    <tr>
                        <th>Tasks</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.tasks.map((task,index) => <Task key={index} task={task} />)}
                </tbody>
            </table>
        );
    }
}

function MapStateToProps(state){
    return{
        tasks:state.tasks,
    }
}

export default connect (MapStateToProps)(TaskList);

我的问题是，当我在搜索栏中键入一个条目时，任务列表根本没有改变，它没有显示任何类型的错误。我在这里缺少什么？

Answer 1

FilterTasks(e.target.value) 应该是 this.props.FilterTasks(e.target.value)，否则它会从你的 mapDispatchToProps.

未绑定到 Redux 的操作中调用导入的函数

还有，你的TaskReducer和SEARCHREDUCER是错误的。 reducer 变量是具有组合状态的变量，而不是 TaskReducer 或 SEARCHREDUCER.

您应该保持搜索字符串的状态并在 TaskList 内使用 this.props.tasks.filter(<insert filter function>).map(<insert map function>) 进行过滤。

React/Redux 搜索栏不工作

React/Redux Search Bar not working

javascript

searchbar

reactjs

redux

react-redux