过滤函数在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