反应过滤器有效负载数组

Question

我需要帮助使用 React 过滤一组不同的 values.Im。提前致谢！！！

我有一个包含 3 种不同类型数组的负载，每种类型的数组都有以下键值。

我的有效载荷：数组（3）

  0: {name: “John “ , age: “24” , height: “174cm” , **type:
   “student”**}.
  1: {name: “Jane”  , age: “49” , height: “168cm” ,**type: “teacher”**}
  2: { name: “schoolName” , country: “UnitedStated” , state: “IL”, 
   **type:”building”**}

"student" 和 "teacher" 类型的卡片包含相同的字段，但 "building" 卡片的字段与其他卡片不同。

我将数组渲染为卡片，我的目标是能够搜索 arrays/cards.

的所有值

这是我的 cards.reducer

import { FILTER_CARDS, FETCH_CARDS } from '../X/Y';

const initialState = { myPayload: [], filteredPayload: [] };

    export default function (state = initialState, action) {
        const { type, myPayload = [], value } = action;
        const handler = {
            [FETCH_CARDS]: {
                ...state,
                myPayload,
            },
            [FILTER_CARDS]: {
                ...state,
                filteredPayload: state.myPayload.filter(({ name }) => name.toLowerCase().match(value)),
            },
        };

        return handler[type] || state;
    }

以上只过滤每张卡片的"name"字段。

我尝试通过对 "FILTER_CARDS" 进行更改来过滤所有值（姓名、年龄、身高、类型、学校名称、国家/地区、州），但这会中断并给我一个错误

"cannot read property 'toLowerCase' of undefined"

[FILTER_CARDS]: {
            ...state,
            filteredPayload: (state.myPayload.type == ('student' || 'teacher')
                    ? (state.myPayload.filter(({ name }) => name.toLowerCase().match(value)),
                    state.myPayload.filter(({ age }) => age.toLowerCase().match(value)),
                    state.myPayload.filter(({ height }) => height.toLowerCase().match(value)))
                    : (state.myPayload.filter(({ name }) => name.toLowerCase().match(value)),
                    state.myPayload.filter(({ country }) => country.toLowerCase().match(value)),
                    state.assetsPayload.filter(({ state }) => state.toLowerCase().match(value)))),
        },

关于如何在此场景中过滤所有值的任何输入？

Answer 1

您可以只在对象的值中搜索，所以您真的不需要关心键名。

filteredPayload: state.myPayload.filter(item => (
  Object.values(item).some(objValue => (
    objValue.toLowerCase().match(value)
  ))
))

Answer 2

我通过执行以下操作解决了这个问题

filteredPayload: state. myPayload.filter(item => {
                switch (item.type) {
                case 'building':
                    return (
                        item.name.toLowerCase().match(value)
                            || item.country.toLowerCase().match(value)
                            || item.state.toLowerCase().match(value)
                    );
                case 'student':
                case 'teacher':
                    return (
                        item.name.toLowerCase().match(value)
                            || item.age.toLowerCase().match(value)
                            || item.height.toLowerCase().match(value)
                    );
                }

                return item;
            }),

谢谢大家的帮助^_^

反应过滤器有效负载数组

React filter payload arrays

arrays

reactjs

payload