首頁猿問迭代多個對象的屬性

迭代多個對象的屬性

JavaScript

慕森王 2023-07-06 15:04:48

我正在為我的應用程序開發一個過濾引擎?，F在，我遇到了對象數據之間的迭代問題，我需要根據用戶應用的過濾器數組進行檢查。最終目標是返回與一個或多個過濾器選項匹配的對象。這是我的代碼：const Results = () => {const [dataStored, setDataStored] = useState([])const filterArray = useSelector(state => state.filterArray);const doctors = useSelector(state => state.doctors);// let doctorsResult = doctors.map(doctor => doctor.indexOf(filterArray) !== -1 )// let doctorsResult = doctors.map(doctor => {for(let key of Object.keys(doctor)){// if (key === 'price' || key === 'gender' || key === 'language'){// // setDataStored([...dataStored, doctor[key]])// console.log("dataStored",doctor[key])}// // return (dataStored.indexOf(filterArray) !== -1 )// }})let doctorsResult = doctors.map(doctor => { Object.keys(doctor).forEach((key) => { if (key === 'price' || key === 'gender' || key === 'language') { setDataStored([...dataStored, doctor[key]]) console.log("dataStored", dataStored) } return (dataStored.indexOf(filterArray) !== -1) })})每個對象都有多個屬性，但我只需要檢查“價格、性別和語言”值。屬性并不相等，有些只是字符串，有些是數組。到目前為止，我已經能夠使用 for..in 和 forEach 循環對屬性進行迭代。我的問題是，我無法比較和返回任何數據，因為它不是數組，因此，indexOf() 給了我一個錯誤。當我嘗試時setDataStored([...dataStored, doctor[key]])，狀態進入無限循環。我對這一切還很陌生。如果有人有更好的方法來實現這一目標，我將非常感激。編輯：這是filterArray的形狀，它是一個動態過濾器，開始為空，然后填充

查看完整描述

1 回答

萬千封印

TA貢獻1891條經驗獲得超3個贊

那么您想從兩個選擇器獲取狀態并做一些工作，然后返回結果？這是的完美問題類型reselect。Reselect 是一個幫助程序，可讓您記住有關狀態選擇器的昂貴計算。

https://github.com/reduxjs/reselect

這對你來說可能是這樣的。

$ yarn add reselect

import React from 'react';

import { useSelector } from 'react-redux';

import { createSelector } from 'reselect';

const filterArraySelector = (state) => state.filterArray;

const doctorsSelector = (state) => state.doctors;

const filteredDoctorsSelector = createSelector(doctorsSelector, filterArraySelector, (filterArray, doctors) => {

? return doctors.filter((doctor) => {

? ? return filterArray.all((key) => {

? ? ? // Do some comparison here, return true if you want to include the doctor in the results

? ? ? return doctor[key] !== undefined;

? ? });

? });

});

const Results = () => {

? const filteredDoctors = useSelector(filteredDoctorsSelector);

? return filteredDoctors.map((doctor) => {doctor});

};

替代方案

您可以在每次渲染時簡單地過濾醫生，而不是使用createSelector記憶過濾。像這樣：

const Results = () => {

? const filterArray = useSelector((state) => state.filterArray);

? const doctors = useSelector((state) => state.doctors);

? const filteredDoctors = useMemo(

? ? () =>

? ? ? doctors.filter((doctor) => {

? ? ? ? return filterArray.all((key) => {

? ? ? ? ? // Do some comparison here, return true if you want to return the doctor

? ? ? ? ? return doctor[key] !== undefined;

? ? ? ? });

? ? ? }),

? ? [doctors, filterArray]

? );

? return filteredDoctors.map((doctor) => {doctor});

};

給定一個像這樣的值的filterArray：

const filterArray = ['Female', 'English'];

我們可以更新過濾器函數來根據 filterArray 值測試對象值。如果任何屬性值與filterArray值匹配，那么我們可以將醫生包含在生成的filteredDoctors列表中。

const Results = () => {

? const filterArray = useSelector((state) => state.filterArray);

? const doctors = useSelector((state) => state.doctors);

? const filteredDoctors = useMemo(() => {

? ? return doctors.filter((doctor) => {

? ? ? return filterArray.some((filter) => {

? ? ? ? return Object.values(doctor).some((value) => value === filter);

? ? ? });

? ? });

? }, [doctors, filterArray]);

? return filteredDoctors.map((doctor) => {doctor});

};

更新：

const Results = () => {

? const filterArray = useSelector((state) => state.filterArray);

? const doctors = useSelector((state) => state.doctors);

? const filteredDoctors = useMemo(() => {

? ? return doctors.filter((doctor) => {

? ? ? return filterArray.some((filter) => {

? ? ? ? return Object.values(doctor).some((value) => {

? ? ? ? ? // If the attribute value is an array

? ? ? ? ? if (Array.isArray(value)) {

? ? ? ? ? ? return value.some((value) => value === filter);

? ? ? ? ? }

? ? ? ? ? // If the attribute value is an object, get the values from the object

? ? ? ? ? if (typeof value === 'object') {

? ? ? ? ? ? return Object.values(value).some((value) => value === filter);

? ? ? ? ? }

? ? ? ? ? // By default, expect the value to be a string

? ? ? ? ? return value === filter;

? ? ? ? });

? ? ? });

? ? });

? }, [doctors, filterArray]);

? return filteredDoctors.map((doctor) => {doctor});

};

反對回復 2023-07-06

1 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

迭代多個對象的屬性

迭代多個對象的屬性

1 回答

添加回答