Javascript React-Redux-当子组件筛选器字段不再匹配时，React-side筛选在编辑时卸载子组件
我试图在我的应用程序中实现过滤功能，并在react端实现过滤。有一个父组件（AllAdmins），它连接到redux并获取所有用户，并在页面上显示为用户列表。此页面有一个下拉筛选器，用于按状态筛选用户。列表中的每个用户都是一个子组件（AdminDetails），它具有编辑按钮来编辑此特定用户。单击编辑按钮时，将显示模式（EditAdminModal），我们可以在其中编辑用户的状态。编辑状态时，我正在更新onChange事件上的存储。存储更新后，如果筛选器不再匹配此更新值，则将卸载正在编辑的子项（AdminDetails），并且更新模式（EditAdminModal）和子组件（AdminDetails）将消失 这是基于实现的正确行为，我理解问题是因为我正在基于道具进行过滤，现在这个孩子的道具在redux商店中更新。我想知道这是否是实现此功能的正确方法，是否有其他方法可以实现此功能 如果有人能帮助我，我将不胜感激。我在这个问题上被困太久了，我正在避免服务器端过滤 AllAdmins父组件Javascript React-Redux-当子组件筛选器字段不再匹配时，React-side筛选在编辑时卸载子组件,javascript,reactjs,redux,Javascript,Reactjs,Redux,我试图在我的应用程序中实现过滤功能，并在react端实现过滤。有一个父组件（AllAdmins），它连接到redux并获取所有用户，并在页面上显示为用户列表。此页面有一个下拉筛选器，用于按状态筛选用户。列表中的每个用户都是一个子组件（AdminDetails），它具有编辑按钮来编辑此特定用户。单击编辑按钮时，将显示模式（EditAdminModal），我们可以在其中编辑用户的状态。编辑状态时，我正在更新onChange事件上的存储。存储更新后，如果筛选器不再匹配此更新值，则将卸载正在编辑的子项（
class AllAdmins extends Component{
constructor(props){
super(props);
this.state = {
filter: ""
};
}
componentDidMount(){
this.props.getAdmins();
}
handleChange = e => {
this.setState({
[e.target.name] : e.target.value
})
}
render() {
let filteredAdmins = this.props.admins.filter(admin => admin.status.indexOf(this.state.filter)!==-1);
return(
<div className="top-align">
{redirectVar}
<div className="heading py-1">
<h4 className="font-weight-bold"> <i className="fas fa-user"></i> Admin Users</h4>
</div>
<div className="container-fluid events-below-heading">
<div className="events-search-section">
<h4 className="text-center text-white all-events-heading p-1 mt-2">All Admin Users</h4>
<div className="row">
<div class="col-6 col-sm-2 order-sm-3">
<select className="form-control" name="filter" onChange={this.handleChange}
value={this.state.filter}>
<option selected value="">Filter by Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
<hr/>
</div>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
{
filteredAdmins.length!==0 ? filteredAdmins.map(admin=>
<AdminDetails admin={admin} key={admin._id}/>
)
:
<h2>null</h2>
}
</div>
</div>)
}
}
const mapDispatchToProps = dispatch => {
return {
getAdmins: () => {dispatch(getAdmins())}
}
}
const mapStateToProps = state => {
return {
admins: state.adminUsers.admins
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AllAdmins);
class AdminDetails extends Component{
constructor(props){
super(props);
this.state = {
showEditAdminModal: false
};
}
showEditAdminModal = e => {
this.setState({showEditAdminModal: true});
}
hideEditAdminModal = e => {
this.setState({showEditAdminModal: false});
}
render() {
return(
<div className="row justify-content-center mt-3">
<div className="col-sm-8">
<div className="card d-flex flex-row">
<div className="card-body card-body-lesspad">
<h5 className="card-title font-weight-bold">{`${this.props.admin.fname} ${this.props.admin.lname}`}</h5>
<p className="card-text font-smaller"><strong>SJSU ID: </strong>{this.props.admin.id}</p>
<p className="card-text font-smaller"><strong>Email ID: </strong>{this.props.admin.email}</p>
<p className="card-text font-smaller"><strong>Status: </strong>{this.props.admin.status}</p>
<p className="card-text font-smaller"><strong>Created Date: </strong>
{new Date(this.props.admin.createdDate).toLocaleString()}
</p>
<p className="card-text font-smaller"><strong>Updated Date: </strong>
{new Date(this.props.admin.updatedDate).toLocaleString()}
</p>
<button type="button" className="btn btn-link view-details-color"
onClick = {this.showEditAdminModal}>
<i className="fas fa-edit"/> Edit
</button>
</div>
</div>
</div>
{this.state.showEditAdminModal ?
<EditAdminModal hideEditAdminModal={this.hideEditAdminModal}
admin={this.props.admin}/> : null}
</div>
)
}
}
export default AdminDetails;
class EditAdminModal extends Component{
handleChange = e => {
const { name, value } = e.target;
this.props.handleChange(this.props.admin._id, name, value);
}
handleUpdate = e => {
e.preventDefault();
this.setState(
{
message: "",
loader: true
}
);
this.props.updateAdmin(this.props.admin)
.then(() => {
this.props.hideEditAdminModal();
})
.catch(() => {
this.setState({
message: "Some Internal Error occured. Please refresh and check if the admin is updated. If not, please try again after sometime. If the problem persist, please comtact Admin."
});
});
}
options = ['Active', 'Inactive'];
render() {
return(
<div>
<div className="modal">
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="itemModal">Add Admin</h5>
</div>
<div className="modal-body">
<h6 style= {{color:"red"}}>{this.state.message}</h6>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
<div class="form-group row">
<label className="col-4">Status</label>
<div className="col-8">
<select className="form-control" name="status" onChange={this.handleChange}>
{
this.options.map( option => {
if(option === this.props.admin.status){
return <option selected key={option}>{option}</option> ;
} else {
return <option key={option}>{option}</option> ;
}
}
)}
</select>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" onClick = {this.handleEditCancel} className="btn btn-primary btn-style"
data-dismiss="modal">Cancel</button>
<button onClick = {this.handleUpdate}
className="btn btn-primary btn-style">Update</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
const mapDispatchToProps = dispatch => {
return {
handleChange: (id, name, value) => {dispatch(adminChangeHandler(id, name, value))},
updateAdmin: admin => dispatch(updateAdmin(admin))
};
};
const mapStateToProps = state => {
return {
responseMessage: state.adminUsers.createResponseMessage
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EditAdminModal);
类AllAdmins扩展组件{
建造师（道具）{
超级（道具）；
此.state={
过滤器：“
};
}
componentDidMount（）{
this.props.getAdmins（）；
}
handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
让filteredAdmins=this.props.admins.filter（admin=>admin.status.indexOf（this.state.filter）！=-1）；
返回(
{redirectVar}
管理员用户
所有管理员用户
按状态筛选
活跃的
不活跃的
{this.props.responseMessage}
{
filteredAdmins.length！==0？filteredAdmins.map（管理员=>
)
:
无效的
}
)
}
}
const mapDispatchToProps=调度=>{
返回{
getAdmins:（）=>{dispatch（getAdmins（））}
}
}
常量mapStateToProps=状态=>{
返回{
管理员：state.adminUsers.admins
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（AllAdmins）；
class AllAdmins extends Component{
constructor(props){
super(props);
this.state = {
filter: ""
};
}
componentDidMount(){
this.props.getAdmins();
}
handleChange = e => {
this.setState({
[e.target.name] : e.target.value
})
}
render() {
let filteredAdmins = this.props.admins.filter(admin => admin.status.indexOf(this.state.filter)!==-1);
return(
<div className="top-align">
{redirectVar}
<div className="heading py-1">
<h4 className="font-weight-bold"> <i className="fas fa-user"></i> Admin Users</h4>
</div>
<div className="container-fluid events-below-heading">
<div className="events-search-section">
<h4 className="text-center text-white all-events-heading p-1 mt-2">All Admin Users</h4>
<div className="row">
<div class="col-6 col-sm-2 order-sm-3">
<select className="form-control" name="filter" onChange={this.handleChange}
value={this.state.filter}>
<option selected value="">Filter by Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
<hr/>
</div>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
{
filteredAdmins.length!==0 ? filteredAdmins.map(admin=>
<AdminDetails admin={admin} key={admin._id}/>
)
:
<h2>null</h2>
}
</div>
</div>)
}
}
const mapDispatchToProps = dispatch => {
return {
getAdmins: () => {dispatch(getAdmins())}
}
}
const mapStateToProps = state => {
return {
admins: state.adminUsers.admins
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AllAdmins);
class AdminDetails extends Component{
constructor(props){
super(props);
this.state = {
showEditAdminModal: false
};
}
showEditAdminModal = e => {
this.setState({showEditAdminModal: true});
}
hideEditAdminModal = e => {
this.setState({showEditAdminModal: false});
}
render() {
return(
<div className="row justify-content-center mt-3">
<div className="col-sm-8">
<div className="card d-flex flex-row">
<div className="card-body card-body-lesspad">
<h5 className="card-title font-weight-bold">{`${this.props.admin.fname} ${this.props.admin.lname}`}</h5>
<p className="card-text font-smaller"><strong>SJSU ID: </strong>{this.props.admin.id}</p>
<p className="card-text font-smaller"><strong>Email ID: </strong>{this.props.admin.email}</p>
<p className="card-text font-smaller"><strong>Status: </strong>{this.props.admin.status}</p>
<p className="card-text font-smaller"><strong>Created Date: </strong>
{new Date(this.props.admin.createdDate).toLocaleString()}
</p>
<p className="card-text font-smaller"><strong>Updated Date: </strong>
{new Date(this.props.admin.updatedDate).toLocaleString()}
</p>
<button type="button" className="btn btn-link view-details-color"
onClick = {this.showEditAdminModal}>
<i className="fas fa-edit"/> Edit
</button>
</div>
</div>
</div>
{this.state.showEditAdminModal ?
<EditAdminModal hideEditAdminModal={this.hideEditAdminModal}
admin={this.props.admin}/> : null}
</div>
)
}
}
export default AdminDetails;
class EditAdminModal extends Component{
handleChange = e => {
const { name, value } = e.target;
this.props.handleChange(this.props.admin._id, name, value);
}
handleUpdate = e => {
e.preventDefault();
this.setState(
{
message: "",
loader: true
}
);
this.props.updateAdmin(this.props.admin)
.then(() => {
this.props.hideEditAdminModal();
})
.catch(() => {
this.setState({
message: "Some Internal Error occured. Please refresh and check if the admin is updated. If not, please try again after sometime. If the problem persist, please comtact Admin."
});
});
}
options = ['Active', 'Inactive'];
render() {
return(
<div>
<div className="modal">
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="itemModal">Add Admin</h5>
</div>
<div className="modal-body">
<h6 style= {{color:"red"}}>{this.state.message}</h6>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
<div class="form-group row">
<label className="col-4">Status</label>
<div className="col-8">
<select className="form-control" name="status" onChange={this.handleChange}>
{
this.options.map( option => {
if(option === this.props.admin.status){
return <option selected key={option}>{option}</option> ;
} else {
return <option key={option}>{option}</option> ;
}
}
)}
</select>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" onClick = {this.handleEditCancel} className="btn btn-primary btn-style"
data-dismiss="modal">Cancel</button>
<button onClick = {this.handleUpdate}
className="btn btn-primary btn-style">Update</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
const mapDispatchToProps = dispatch => {
return {
handleChange: (id, name, value) => {dispatch(adminChangeHandler(id, name, value))},
updateAdmin: admin => dispatch(updateAdmin(admin))
};
};
const mapStateToProps = state => {
return {
responseMessage: state.adminUsers.createResponseMessage
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EditAdminModal);
类AdminDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showEditAdminModal:false
};
}
showEditAdminModal=e=>{
this.setState（{showEditAdminModal:true}）；
}
HIDEEDITAdminModel=e=>{
this.setState（{showEditAdminModal:false}）；
}
render（）{
返回(
{`${this.props.admin.fname}${this.props.admin.lname}}
SJSU ID:{this.props.admin.ID}
电子邮件ID:{this.props.admin.Email}
状态：{this.props.admin.Status}
创建日期：更新日期： {新日期（this.props.admin.updateDate）.toLocaleString（）}
编辑 {this.state.showEditAdminModal？ ：null} ) } } 导出默认管理员详细信息； EditAdminModal组件class AllAdmins extends Component{
constructor(props){
super(props);
this.state = {
filter: ""
};
}
componentDidMount(){
this.props.getAdmins();
}
handleChange = e => {
this.setState({
[e.target.name] : e.target.value
})
}
render() {
let filteredAdmins = this.props.admins.filter(admin => admin.status.indexOf(this.state.filter)!==-1);
return(
<div className="top-align">
{redirectVar}
<div className="heading py-1">
<h4 className="font-weight-bold"> <i className="fas fa-user"></i> Admin Users</h4>
</div>
<div className="container-fluid events-below-heading">
<div className="events-search-section">
<h4 className="text-center text-white all-events-heading p-1 mt-2">All Admin Users</h4>
<div className="row">
<div class="col-6 col-sm-2 order-sm-3">
<select className="form-control" name="filter" onChange={this.handleChange}
value={this.state.filter}>
<option selected value="">Filter by Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
<hr/>
</div>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
{
filteredAdmins.length!==0 ? filteredAdmins.map(admin=>
<AdminDetails admin={admin} key={admin._id}/>
)
:
<h2>null</h2>
}
</div>
</div>)
}
}
const mapDispatchToProps = dispatch => {
return {
getAdmins: () => {dispatch(getAdmins())}
}
}
const mapStateToProps = state => {
return {
admins: state.adminUsers.admins
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AllAdmins);
class AdminDetails extends Component{
constructor(props){
super(props);
this.state = {
showEditAdminModal: false
};
}
showEditAdminModal = e => {
this.setState({showEditAdminModal: true});
}
hideEditAdminModal = e => {
this.setState({showEditAdminModal: false});
}
render() {
return(
<div className="row justify-content-center mt-3">
<div className="col-sm-8">
<div className="card d-flex flex-row">
<div className="card-body card-body-lesspad">
<h5 className="card-title font-weight-bold">{`${this.props.admin.fname} ${this.props.admin.lname}`}</h5>
<p className="card-text font-smaller"><strong>SJSU ID: </strong>{this.props.admin.id}</p>
<p className="card-text font-smaller"><strong>Email ID: </strong>{this.props.admin.email}</p>
<p className="card-text font-smaller"><strong>Status: </strong>{this.props.admin.status}</p>
<p className="card-text font-smaller"><strong>Created Date: </strong>
{new Date(this.props.admin.createdDate).toLocaleString()}
</p>
<p className="card-text font-smaller"><strong>Updated Date: </strong>
{new Date(this.props.admin.updatedDate).toLocaleString()}
</p>
<button type="button" className="btn btn-link view-details-color"
onClick = {this.showEditAdminModal}>
<i className="fas fa-edit"/> Edit
</button>
</div>
</div>
</div>
{this.state.showEditAdminModal ?
<EditAdminModal hideEditAdminModal={this.hideEditAdminModal}
admin={this.props.admin}/> : null}
</div>
)
}
}
export default AdminDetails;
class EditAdminModal extends Component{
handleChange = e => {
const { name, value } = e.target;
this.props.handleChange(this.props.admin._id, name, value);
}
handleUpdate = e => {
e.preventDefault();
this.setState(
{
message: "",
loader: true
}
);
this.props.updateAdmin(this.props.admin)
.then(() => {
this.props.hideEditAdminModal();
})
.catch(() => {
this.setState({
message: "Some Internal Error occured. Please refresh and check if the admin is updated. If not, please try again after sometime. If the problem persist, please comtact Admin."
});
});
}
options = ['Active', 'Inactive'];
render() {
return(
<div>
<div className="modal">
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="itemModal">Add Admin</h5>
</div>
<div className="modal-body">
<h6 style= {{color:"red"}}>{this.state.message}</h6>
<h6 style= {{color:"red"}}>{this.props.responseMessage}</h6>
<div class="form-group row">
<label className="col-4">Status</label>
<div className="col-8">
<select className="form-control" name="status" onChange={this.handleChange}>
{
this.options.map( option => {
if(option === this.props.admin.status){
return <option selected key={option}>{option}</option> ;
} else {
return <option key={option}>{option}</option> ;
}
}
)}
</select>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" onClick = {this.handleEditCancel} className="btn btn-primary btn-style"
data-dismiss="modal">Cancel</button>
<button onClick = {this.handleUpdate}
className="btn btn-primary btn-style">Update</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
const mapDispatchToProps = dispatch => {
return {
handleChange: (id, name, value) => {dispatch(adminChangeHandler(id, name, value))},
updateAdmin: admin => dispatch(updateAdmin(admin))
};
};
const mapStateToProps = state => {
return {
responseMessage: state.adminUsers.createResponseMessage
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EditAdminModal);