Реагируйте на использование True/False для .filter.map

У меня есть сайт, где я хочу фильтровать свои фотографии по тегам. фильтр сделан с флажками, которые генерируются самими тегами.

Я разбиваю код на необходимое:

   const [filteredTags, setFilteredTags] = useState();
    // {wedding: false, couple: true, NSWF: true}  <-this is the ouput of console.info(filteredTags)

const PortfolioData= [
    {
      name: "John & Johna ",
      tag: ["wedding", "couple"],
      img: [ src1 , src2, ...] //irrelevant
    },
    {
      name: "Mario & Marie",
      tag: ["couple", "NSFW"],
      img: [ src1 , src2, ...] //irrelevant
    },
  ];

return(
<>
 {PortfolioData
            .filter(visible => visible.tag.includes( ??????? )) //<- what to write ?
            .map((PortfolioData) => {                    
              return (
                <Tile                                        
                  header = {PortfolioData.name}
                  imgSrc = {PortfolioData.mainImg[0]}
                />
              );
            })}


</>
)

Как я могу отфильтровать это?

Какое сочетание вы хотите? Должны ли присутствовать все true или хотя бы один true?

CertainPerformance 21.11.2022 18:18

@CertainPerformance хотя бы один :)

Spluli 21.11.2022 18:26
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
2
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Убедитесь, что .some из итерируемых тегов правдивы в filteredTags объекте. (Чтобы упростить управление, было бы хорошо установить filteredTags, чтобы также иметь начальное значение пустого объекта, а не undefined)

const [filteredTags, setFilteredTags] = useState({});
// for TypeScript:
// const [filteredTags, setFilteredTags] = useState<Record<string, boolean | undefined>>({});
{PortfolioData
  .filter(collection => collection.tag.some(tag => filteredTags[tag]))

Я получил ошибку filteredTags is undefindet, поэтому я изменил useState() на useState(''). Теперь, после этого, я получил ошибку из-за того, что элемент [tag] неявно имеет тип «любой», потому что выражение индекса не имеет типа «число».

Spluli 21.11.2022 20:49

Это работает, но теперь я должен понять, как так удовлетворить Typescript

Spluli 24.11.2022 16:03

Скажите TS, что объект имеет тип Record<string, boolean | undefined> — см. общий синтаксис в ответе — это работает для вас?

CertainPerformance 24.11.2022 16:04

Ты волшебник! Спасибо !

Spluli 24.11.2022 16:08

Другие вопросы по теме