双滤波器只在活动时过滤。

Question

我正在尝试创建一个过滤器，它可以根据类型和文本过滤一系列对象。

期望的结果应该是，如果没有传递过滤器，那么所有内容都会显示出来；当按文本过滤时，显示相关的结果(考虑哪种类型是活动的)，当类型是活动的时候显示结果，考虑到传递了哪些文本(如果有文本传递)。

所发生的是，当我试图通过文本搜索，什么都不会发生，除非我设置过滤器的类型。

我的过滤器是

async function query(filterBy) {
  let melodies = _loadMelodiesFromStorage();

  try {
    if (!filterBy) return melodies;
    if (filterBy.genre === 'none') {
      return melodies;
    }
    const filterRegex = new RegExp(filterBy.text, 'i');
    let filteredMelodies = melodies.filter((melody) => {
      return filterRegex.test(melody.name);
    });

    console.log('filteredMelodies:', filteredMelodies);

    filteredMelodies = filteredMelodies.filter((melody) => {
      return melody.genre === filterBy.genre;
    });
    return filteredMelodies;
  } catch (err) {
    console.log('cant get melodies from local storage', err);
    throw err;
  }
}

这是过滤器组件：

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { loadMelodies } from '../cmps/store/melody.action.js';
import { melodyService } from '../service/melody.service.js';

const Filters = () => {
  const dispatch = useDispatch();
  const genres = melodyService.getGenres();
  const [filter, setFilter] = useState({
    text: null,
    genre: 'none',
  });

  useEffect(() => {
    dispatch(loadMelodies(filter));
  }, [filter]);

  return (
    <div className='w-full flex pb-5'>
      <input
        className='block appearance-none border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline'
        type='text'
        placeholder='Search...'
        value={filter.text}
        onChange={(e) => setFilter({ ...filter, text: e.target.value })}
      />
      <select
        className='block appearance-none border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline'
        value={filter.genre}
        onChange={(e) => setFilter({ ...filter, genre: e.target.value })}>
        {genres.map((genre) => (
          <option value={genre.toLowerCase()}>{genre}</option>
        ))}
      </select>
    </div>
  );
};

export default Filters;

Answer 1

我试着简化一下，也许是这样的：

const query = ({ genre, text } = {}) => {
  let list = melodies //get them somewhat

  if (genre) {
    list = list.filter(m => m.genre === genre)
  }

  if (text) {
    list = list.filter(m => m.text.includes(text))
  }

  return list
}

​

const melodies = [
  { genre: 'g1', text: 'this is my text' },
  { genre: 'g2', text: 'another text' },
  { genre: 'g2', text: 'description' }
]

const query = ({ genre, text } = {}) => {
  let list = melodies

  if (genre) {
    list = list.filter(m => m.genre === genre)
  }

  if (text) {
    list = list.filter(m => m.text.includes(text))
  }

  return list
}

console.log(query({ text: 'text' }))
console.log(query({ genre: 'g2' }))
console.log(query({ genre: 'g2', text: 'description' }))
console.log(query())

​

Answer 2

这个条件不意味着如果genre过滤器被设置为'none'，那么query函数将返回所有没有机会执行文本过滤器的结果吗？我建议您将query函数分成几个较小的函数。

    if (filterBy.genre === 'none') {
      return melodies;
    }

Answer 3

我通过添加

   if (!filterBy || (filterBy.text === '' && filterBy.genre === 'None')) {
     return melodies;
   }

也许不是最好的解决方案，但有效。