我正在尝试为我的医生列表创建一个过滤器，但是它不起作用。 我尝试按照一些教程进行操作，但没有成功。 我哪里错了？ 按照我的存储库中的完整项目进行操作，但是我的问题出在index.js文件（src /组件/ 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);
答案 0 :(得分：0)
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}/>);
// ...
);
}