React redux 搜索过滤器不显示过滤后的内容？答案

【问题标题】：React redux search filter not displaying filtered content?React redux 搜索过滤器不显示过滤后的内容？
【发布时间】：2019-05-24 05:16:22
【问题描述】：

我已经使用 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
})

截图：

【问题讨论】：

您检查searchTermChanged 是否已连接到您的元素？
@Jin 如何查看是否连接？

标签： javascript reactjs redux react-redux

【解决方案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);

【讨论】：

【解决方案2】：

您从文件中导入 Home 组件海峡中的 projects 而不是减速器。

将projects 添加到您的mapStateToProps 函数中

【讨论】：

【解决方案3】：

我认为你没有以正确的方式使用减速器。例如

{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>
              ))}

错了。你使用了从'../../data/projects'导入的projects

所以我建议你如下使用

1：删除项目的导入语句
2：像这样更改代码。

render() {
        const { searchTermChanged } = this.props;
        const {projects} = this.props.search; //added
        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">
                  <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>
        )
      }

【讨论】：

【解决方案4】：

“searchtermChanged”动作创建器必须与调度一起使用，而不是直接调用。寻找参考 -

【讨论】：