React Search - 我正在尝试创建一个过滤器，但它不起作用

Question

我正在尝试为我的医生列表创建一个过滤器，但它不起作用。 我尝试按照一些教程进行操作，但没有成功。 我哪里错了？ 使用完整的项目关注我的存储库，但我的问题出在 index.js 文件中（src / components / Doctors）：Frontend Repository 感谢您的帮助，因为我已经尝试创建过滤器超过 1 周，但我做不到。

下面是 index.js 的完整代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import DoctorsActions from '~/store/ducks/doctors';
import MembersActions from '~/store/ducks/members';

import Can from '~/components/Can';
import Modal from '../Modal';
import Members from '~/components/Members';
import Button from '../../styles/components/Button';

import {
  Editbutton,
  Cancelbutton,
  Savebutton,
  Container,
  Doctor,
  MenuItem,
  SearchField,
} from './styles';

class Doctors extends Component {
  static propTypes = {
    getDoctorsRequest: PropTypes.func.isRequired,
    openDoctorModal: PropTypes.func.isRequired,
    closeDoctorModal: PropTypes.func.isRequired,
    createDoctorRequest: PropTypes.func.isRequired,
    openMembersModal: PropTypes.func.isRequired,
    activeTeam: PropTypes.shape({
      name: PropTypes.string,
    }),
    doctors: PropTypes.shape({
      data: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.number,
          nm_doctor: PropTypes.string,
        })
      ),
      doctorModalOpen: PropTypes.bool,
    }).isRequired,
    members: PropTypes.shape({
      membersModalOpen: PropTypes.bool,
    }).isRequired,
  };

  static defaultProps = {
    activeTeam: null,
  };

  state = {
    nm_doctor: '',
    spc_doctor: '',
    address_doctor: '',
    district_doctor: '',
    city_doctor: '',
    state_doctor: '',
    ph1_doctor: '',
    ph2_doctor: '',
    ph3_doctor: '',
    email: '',
    website: '',
    sus: '',
    tj: '',
    plan_doctor: '',
    calldate_doctor: '',
    contact_colih: '',
    comments: '',
  };

  componentDidMount() {
    const { getDoctorsRequest, activeTeam } = this.props;

    if (activeTeam) {
      getDoctorsRequest();
    }
  }

  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSearchChange = e => {
    this.setState({ [e.target.name]: e.target.value });

    const doctorlist = e.target.filter(doctors =>
      doctors[e.target.name].includes(e.target.value)
    );

    this.setState(doctorlist);
  };

  handleCreateDoctor = e => {
    e.preventDefault();

    const { createDoctorRequest } = this.props;
    const {
      nm_doctor,
      spc_doctor,
      address_doctor,
      district_doctor,
      city_doctor,
      state_doctor,
      ph1_doctor,
      ph2_doctor,
      ph3_doctor,
      email,
      website,
      sus,
      tj,
      plan_doctor,
      calldate_doctor,
      contact_colih,
      comments,
    } = this.state;

    createDoctorRequest(
      nm_doctor,
      spc_doctor,
      address_doctor,
      district_doctor,
      city_doctor,
      state_doctor,
      ph1_doctor,
      ph2_doctor,
      ph3_doctor,
      email,
      website,
      sus,
      tj,
      plan_doctor,
      calldate_doctor,
      contact_colih,
      comments
    );
  };

  render() {
    const {
      activeTeam,
      openDoctorModal,
      closeDoctorModal,
      doctors,
      openMembersModal,
      members,
    } = this.props;
    const {
      nm_doctor,
      spc_doctor,
      address_doctor,
      city_doctor,
      district_doctor,
      state_doctor,
      ph1_doctor,
      ph2_doctor,
      ph3_doctor,
      email,
      website,
      sus,
      tj,
      plan_doctor,
      calldate_doctor,
      contact_colih,
      comments,
    } = this.state;

    if (!activeTeam) return null;

    return (
      <Container>
        <header>
          <h1>{activeTeam.name}</h1>
          <div>
            <Can checkPermission="doctors_create">
              <Button onClick={openDoctorModal}>Cadastrar Médico</Button>
              <Button onClick={openMembersModal}>Convidar Membro</Button>
            </Can>
          </div>
        </header>
        {/* Mostra lista dos médicos cadastrados */}

        <SearchField
          placeholder="Procurar por....."
          onChange={this.handleSearchChange}
          onClick={() => console.log('buscar médico!')}
        />
        {/* <Searchbutton
          onClick={() => console.log('Botão teste para editar médico!')}
          size="26"
        /> */}
        {doctors.data.map(doctor => (
          <Doctor key={doctor.id}>
            <Editbutton
              onClick={() => console.log('Botão teste para editar médico!')}
              size="28"
            />
            <ul>
              <li>
                <b>{doctor.nm_doctor}</b>
              </li>
              <li>{doctor.spc_doctor}</li>
              <li>
                {doctor.address_doctor} - {doctor.district_doctor}
              </li>

              <li>
                {doctor.ph1_doctor} / {doctor.ph2_doctor} / {doctor.ph3_doctor}
              </li>
              <li>
                {doctor.city_doctor} - {doctor.state_doctor}
              </li>
              <li>{doctor.email}</li>
              <li>{doctor.website}</li>
              <li>
                <b>SUS: </b>
                {doctor.sus} - <b>TJ: </b>
                {doctor.tj}
              </li>
              <li>
                <b>Convênio: </b>
                {doctor.plan_doctor}
              </li>
              <li>
                <b>Última Visita: </b>
                {doctor.calldate_doctor}
              </li>
              <li>
                <b>Contato Colih: </b>
                {doctor.contact_colih}
              </li>
              <li>
                <b>Observações: </b>
                {doctor.comments}
              </li>
            </ul>
          </Doctor>
        ))}
        {/* Término - mostrar médicos cadastrados */}
        {/* //Modal Cadastrar Médicos começa aqui// */}
        {doctors.doctorModalOpen && (
          <Modal>
            <h1>Novo Médico</h1>
            <form onSubmit={this.handleCreateDoctor}>
              <span>Nome do médico</span>
              <input
                type="text"
                name="nm_doctor"
                value={nm_doctor}
                onChange={this.handleInputChange}
              />

              <span>Especialidade</span>
              <input
                name="spc_doctor"
                value={spc_doctor}
                onChange={this.handleInputChange}
              />
              <span>Endereço</span>
              <input
                name="address_doctor"
                value={address_doctor}
                onChange={this.handleInputChange}
              />
              <span>Bairro</span>
              <input
                name="district_doctor"
                value={district_doctor}
                onChange={this.handleInputChange}
              />
              <span>Cidade</span>
              <input
                name="city_doctor"
                value={city_doctor}
                onChange={this.handleInputChange}
              />

              <span>Estado</span>
              <select
                name="state_doctor"
                value={state_doctor}
                onChange={this.handleInputChange}
              >
                <MenuItem value="ST">Selecione....</MenuItem>
                {/* <MenuItem value="AM">Rio de Janeiro</MenuItem> */}
                <MenuItem value="SP">São Paulo</MenuItem>
              </select>

              <span>Telefone 1</span>
              <input
                name="ph1_doctor"
                value={ph1_doctor}
                onChange={this.handleInputChange}
              />
              <span>Telefone 2</span>
              <input
                name="ph2_doctor"
                value={ph2_doctor}
                onChange={this.handleInputChange}
              />
              <span>Telefone 3</span>
              <input
                name="ph3_doctor"
                value={ph3_doctor}
                onChange={this.handleInputChange}
              />
              <span>Email</span>
              <input
                name="email"
                value={email}
                onChange={this.handleInputChange}
              />
              <span>Website</span>
              <input
                name="website"
                value={website}
                onChange={this.handleInputChange}
              />
              <span>SUS</span>
              <select name="sus" value={sus} onChange={this.handleInputChange}>
                <MenuItem value="ST">Selecione....</MenuItem>
                <MenuItem value="Sim">Sim</MenuItem>
                <MenuItem value="Não">Não</MenuItem>
              </select>
              <span>TJ</span>
              <select name="tj" value={tj} onChange={this.handleInputChange}>
                <MenuItem value="ST">Selecione....</MenuItem>
                <MenuItem value="Sim">Sim</MenuItem>
                <MenuItem value="Não">Não</MenuItem>
              </select>
              <span>Convênio</span>
              <input
                name="plan_doctor"
                value={plan_doctor}
                onChange={this.handleInputChange}
              />
              <span>Última Visita</span>
              <input
                type="date"
                name="calldate_doctor"
                value={calldate_doctor}
                onChange={this.handleInputChange}
              />
              <span>Contato Colih</span>
              <input
                name="contact_colih"
                value={contact_colih}
                onChange={this.handleInputChange}
              />
              <span>Observações</span>
              <input
                name="comments"
                value={comments}
                onChange={this.handleInputChange}
              />

              <Savebutton size="big" type="submit">
                Salvar
              </Savebutton>
              <Cancelbutton
                onClick={closeDoctorModal}
                size="small"
                color="gray"
              >
                Cancelar
              </Cancelbutton>
            </form>
          </Modal>
          // Modal Cadastrar Médicos termina aqui//
        )}
        {members.membersModalOpen && <Members />}
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  activeTeam: state.teams.active,
  members: state.members,
  doctors: state.doctors,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators({ ...DoctorsActions, ...MembersActions }, dispatch);

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

Error after typing in the search bar

Screen with search bar

Answer 1

e.target 是触发事件的组件，你不能在它上面调用filter。您可能希望从州获得完整的医生名单并对其进行过滤。

在你的构造函数中：

constructor(props) {
    super(props);

    // ...

    // set initial state
    // you will need to populate these from your backend and make sure to set filtered to the full list when you retrieve your list of doctors
    this.state = {
        doctorList: [],
        filtered: [],
    }
}

在您的handleSearchChange 函数中：

handleSearchChange = e => {
    // get the search term
    const searchTerm = e.target.value;
    // filter the full list of doctors
    const filtered = this.state.doctorList.filter(doctor => doctor.name.includes(searchTerm));
    // set the filtered list as state
    this.setState({filtered: filtered});
}

然后在您的渲染函数中，从状态中获取过滤后的列表并从中进行渲染。

render() {
    return(
        // ...

        // render each doctor in the filtered list
        this.state.filtered.forEach(doctor => <DoctorListElement doctor={doctor}/>);

        // ...
    );
}