如何在反应js打字稿中过滤对象数组中的数据答案

【问题标题】：How to filter the data in which array of array of objects in react js typescript如何在反应js打字稿中过滤对象数组中的数据
【发布时间】：2021-12-03 16:22:19
【问题描述】：

我想根据滑块变化的最小和最大价格范围过滤经销商数据。我正在使用 API 以及 Handle change 函数中的滑块最小值和最大值获取数据经销商数据。如何筛选服务成本在价格范围内的经销商。数组中将始终存在单一服务，因为用户现在可以选择一项服务，我们将根据所选服务显示经销商。

const [dealersData, setDealersData] = useState<Dealer[]>([]);
const [filteredData, setFilteredData] = useState<Dealer[]>(dealersData);
 const [value, setValue] = React.useState<number[]>([250, 1000]);

const handleChange = (event: Event, newValue: number | number[]) => {
        setValue(newValue as number[]);
        let result = [];
        result = dealersData.filter((data) => {
            return data.Services.filter(dataItem => (dataItem.cost >= value[0] && dataItem.cost <= value[1]));
        });
        setFilteredData(result);
    };

 axios.get<[]>(`/dealer/serviceType/${props.serviceData.id}/${props.Id}`)
            .then((response: AxiosResponse) => {
                setDealersData(response.data);
                console.log(dealersData);
                setLoading(true);
                //setFilteredData(response.data);
            })


<Slider getAriaLabel={() => 'Price'} value={value} onChange={handleChange} valueLabelDisplay="auto" getAriaValueText={valuetext} min={0} max={1000} />



export interface Dealer{
    dealer_id:number,
    name:string,
    mobile:number,
    email:string,
    gst_no:string,
    locality:string,
    city:string,
    state:string,
    pincode:string,
    vehicle_type_id:number,
    Vehicletype:{
        vehicle_type:string
    };
    Services:[
        {
            discription:string,
            cost:number
        }
    ],
    dealer_history:[
        {
            rating:number,
            comments:string
        }
    ]
}

【问题讨论】：

标签： reactjs typescript filter material-ui

【解决方案1】：

我认为问题在于您在这里使用了过滤器：

result = dealersData.filter((data) => {
        return data.Services.filter(dataItem => (dataItem.cost >= value[0] && dataItem.cost <= value[1]));
    });

.filter() 函数需要一个布尔返回值，并将返回该谓词/布尔返回 true 的数组中的所有值。过滤器本身不返回布尔值，所以这没有任何意义：

dealersData.filter((data) => {
    // Remember, filter() returns a list of all items in the array that match the predicate.
    // It does NOT return a boolean, so this always evaluates to true (as all arrays are truthy in JS)
    return data.Services.filter();
});

相反，您可能想要使用.some() 或.every() 函数，具体取决于您需要哪一个。 .some() 如果 any 数组值与谓词匹配（即任何服务都在价格范围内），则返回 true，而如果 all 数组值与谓词匹配，.every() 返回 true谓词（又名。价格范围内的所有服务区域）：

result = dealersData.filter((data) => {
    return data.Services.some(dataItem => (dataItem.cost >= value[0] && dataItem.cost <= value[1]));
});

【讨论】：