在reactjs中返回空数组的过滤函数

Question

我有一个接收参数的组件。

我使用该参数来比较和过滤掉那些等于参数值的元素。但是当我使用filter函数时，它给出了一个空数组。我哪里做错了?

编辑在过滤器功能中，如果我使用parseInt(this.props.match.params)，它可以工作。但是如果我使用parseInt(this.state.registrationId)就不起作用了。

import React, {Component} from "react";
import {Link} from 'react-router-dom';
import Progress from "../Common/Progress";
class AdmissionProcess extends Component {
state = {
progress: true,
enquiries: [],
registrationId: this.props.match.params.reg_status
}
componentDidMount = () => {
this.loadData()
}
componentDidUpdate  = (prevProps) => {
if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
this.setState({registrationId: this.props.match.params.reg_status})
console.log("I ran")
}
}
loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res =>  res.json())
.then(result => this.setState({enquiries: [...result], progress: false}))
.catch(err =>  console.log("err"+ " " +err))
}
checkEnquiries = () => {
const reg2 = this.state.enquiries.filter(enq => enq.registrationId===this.state.registrationId)
console.log(reg2)
}
render() {
this.checkEnquiries()
return(
{/* Jsx code here*/}
)
}
export default AdmissionProcess

Answer 1

注意您的loadData()粉碎了初始的state，请尝试以下代码:

loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res =>  res.json())
.then(result => this.setState({...this.state, enquiries: [...result], progress: false}))
.catch(err =>  console.log("err"+ " " +err))
}

checkEnquiries = () => {
const reg2 = this.state.enquiries.filter(enq => enq.registrationId===parseInt(this.state.registrationId))
console.log(reg2)
}

Answer 2

好了，经过几次尝试，我设法让它工作…老实说，我仍然不知道它到底是如何工作的，我真的很感激一些关于它是如何工作的解释，其他人不知道……下面是修改后的代码…

import React, {Component} from "react";
import {Link} from 'react-router-dom';
import Progress from "../Common/Progress";
class AdmissionProcess extends Component {
state = {
progress: true,
enquiries: [],
registrationId: this.props.match.params.reg_status,
requiredList: []
}
componentDidMount = () => {
this.loadData()
}
loadData () {
const url = window.domain+"/list-enquiry";
fetch(url)
.then(res =>  res.json())
.then(result => this.setState({enquiries: [...result], progress: false}, this.checkEnquiries))
.catch(err =>  console.log("err"+ " " +err))
}
componentDidUpdate  = (prevProps) => {
if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
this.setState({registrationId: this.props.match.params.reg_status}, this.checkEnquiries)
console.log("I ran")
}
}
checkEnquiries = () => {
const reg2 = this.state.enquiries.filter((enq) => enq.registrationId === parseInt(this.state.registrationId))
this.setState({requiredList: [...reg2]})
}
render() {
return ({/*JSX Code Here*/})
}
}
export default AdmissionProcess