Javascript React Redux-创建搜索筛选器

我需要帮助在我的应用程序中创建搜索筛选器。这是一个简单的应用程序，用于学习目的

目标是创建一个搜索过滤器。我在搜索栏容器中有状态，我想我需要将它作为道具传递给我的工作列表容器。但是我不知道怎么做。从那个阶段开始，我会把它做成这样

工作列表.js

renderWork() {

    let filteredWorks = this.props.works.filter((work) => {
      return work.title.indexOf(this.state.init) !== -1;
    }
    );


    return filteredWorks.map((work) => {
      return (
        <tr>
          <td>{work.title}</td>
        </tr>
      );
    });
  }

index.js

import React, { Component } from 'react';
import SearchBar from '../containers/search_bar';
import WorkList from '../containers/work_list.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <SearchBar/>
        <WorkList/>
      </div>
    );
  }
}

import React, { Component } from 'react';

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state = { init: '' };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    this.setState({ init: event.target.value });
  }

  onFormSubmit(event) {
    event.preventDefault();
  }
  render() {
    return (
      <form
        onSubmit={this.onFormSubmit}
        className="input-group">
        <input
          className="form-control"
          placeholder = "Procurar Trabalho"
          onChange={this.onInputChange}
          value={this.state.init} />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Pesquisar</button>
        </span>
      </form>
    );
  }
} 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWork } from '../actions/index';

class WorkList extends Component {

  renderWork() {
    return this.props.works.map((work) => {
      return (
        <tr>
          <td>{work.title}</td>
        </tr>
      );
    });
  }

  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>
          {this.renderWork() }
        </tbody>
      </table>

    );
  }
}

function mapStateToProps(state) {
  return {
    works: state.works
  }
}

export default connect(mapStateToProps)(WorkList);

export default function () {
  return [
    { title: 'Mirististica' },
    { title: 'Vet' }
  ];
}

import { combineReducers } from 'redux';
import MostrarTrabalhos from './reducer_work';

const rootReducer = combineReducers({
    works : MostrarTrabalhos
});

export default rootReducer;

---

谢谢

您的代码似乎缺少一些关键元素，无法让Redux正常工作。当搜索输入发生更改时，您需要发送一个Redux操作，这将更新存储。现在，当输入发生变化时，您只需设置搜索栏的本地状态。其次，您的reducer不会修改状态，它总是返回相同的数组

沿着这条线的东西

您的操作文件可能如下所示：

export const SEARCH = 'SEARCH';

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

import {SEARCH} from './actions';

const initialState = {contents: ['Mirististica', 'Vet'], value: '', works: []};

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

那么您的减速器可能如下所示：

export const SEARCH = 'SEARCH';

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

import {SEARCH} from './actions';

const initialState = {contents: ['Mirististica', 'Vet'], value: '', works: []};

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

然后在

搜索栏中

：

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

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

    return (
        <input
          className="form-control"
          placeholder = "Procurar Trabalho"
          onChange={(e) => search(e.target.value)}
          value={value} />
    );
  }
} 

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

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

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

---

请你的问题来澄清你的问题。我是新的反应和重复，有时很难提出问题…谢谢你的建议。谢谢你的回答，我是新来的，我会重新整理并做出反应。我在努力学习，我会研究你给我的解决方案。：）你的代码上有一个TypeO，我无法解决它，你能帮我吗？{works.map（（work）=>{work}}对不起，我错过了

map

函数上的关闭

）

。我已经更新了。它可以工作：）。非常感谢你的帮助。我明白我必须学习更多。：）！！谢谢@PatrickGrimard为什么在这种方法中没有使用选择器。