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);

Answer 2

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

将projects添加到您的mapStateToProps函数中

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

是错误的。您使用了从projects导入的'../../data/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>
        )
      }

Answer 4

“ searchtermChanged”操作创建者必须与分发一起使用，而不是直接调用。寻找参考-

React Redux搜索过滤器不显示过滤的内容吗？

4 个答案: