javascript - React redux 搜索过滤器不显示过滤内容？

Question

我已经使用 React Redux 创建了搜索过滤器，但是当我在搜索字段中输入文本时，项目列表不会根据我在搜索输入中输入的值进行更改。为什么这样 ？项目应该根据搜索输入进行过滤，但它不起作用，为什么会这样？

代码:

home.js:

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { searchTermChanged } from '../../store/actions/searchAction';
 import projects from '../../data/projects';

 class Home extends Component {
      render() {
          const { searchTermChanged } = this.props;
          return (
              <div>
                  <Navbar/>
                  <div className="header">
                  <div className="md-form mt-0 customsearch">
                      <input className="form-control" type="text" placeholder="Search projects" aria-label="Search" 
                        value={this.props.searchTerm}
                        onChange={e => searchTermChanged(e.target.value)}
                      />
                  </div>

                  <div class="container-fluid">
                      <div class="row">
                          {projects.map( (val,index) => (
                              <div class="col-3" key={index}>
                                   <Card title={val.title} by={val.by} blurb={val.blurb} url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                              </div>
                          ))}
                      </div>
                  </div>
             </div>
          )
       }
    }

    const mapStateToProps = state => ({
        search: state.search.searchTerm
    })

    export default connect (mapStateToProps, { searchTermChanged })(Home);

searchReducer.js:

   import { SEARCH_INPUT_CHANGED } from '../actions/types';
    import Projects from '../../data/projects';

    const initialState = {
        searchTerm: '',
        projects: Projects
    }

    export default function (state = initialState, action) {
        switch (action.type) {
            case SEARCH_INPUT_CHANGED:
                const { searchTerm } = action.payload;
                return {
                ...state,
                searchTerm: searchTerm,
                projects: searchTerm
                    ? Projects.filter(
                        projects =>
                        projects.name.toLowerCase().indexOf(searchTerm.toLowerCase()) >
                        -1,
                    )
                    : Projects,
                };
            default:
                return state;
        }
    }

searchAction.js:

import { SEARCH_INPUT_CHANGED } from './types';

export const searchTermChanged = (searchTerm) => ({
    type: SEARCH_INPUT_CHANGED,
    payload: { searchTerm }
});

index.js:

import {combineReducers} from 'redux';
import searchReducer from './searchReducer';

export default combineReducers({
    search: searchReducer
})

截图:

Answer 1

工作代码:

import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { searchTermChanged } from '../../store/actions/searchAction';

    class Home extends Component {

      render() {

        const { searchTermChanged } = this.props;

        return (
          <div>
              <Navbar/>
              <div className="header">
                <div className="md-form mt-0 customsearch">
                    <input className="form-control" type="text" placeholder="Search projects" aria-label="Search" 
                      value={this.props.search}
                      onChange={e => searchTermChanged(e.target.value)}
                    />
                </div>
              <div class="container-fluid">
                <div class="row">
                  {this.props.projects.map( (val,index) => (
                    <div class="col-3">
                      <Card title={val.title} by={val.by} blurb={val.blurb} 
                      url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                    </div>
                  ))}
                </div>
              </div>
          </div>
        )
      }
    }

    const mapStateToProps = state => ({
      search: state.search.searchTerm,
      projects: state.search.projects
    })

    export default connect (mapStateToProps, dispatch => ({ searchTermChanged: searchTerm => dispatch(searchTermChanged(searchTerm)) }))(Home);