Почему .includes не проверяет наличие массива?

Question

[CHtommy]

Здрасте, не могу понять по какой причине я получаю все элементы "disabled" (использую либу classNames).

const typeNames = ['settings1', 'settings2'];
    const [activeType, setActiveType] = useState(0);

    const onSelectType = (index) => {
        setActiveType(index)
    }

className={classNames("item_settings",{ active: activeType === index && types.includes(index), disabled: !types.includes(index)})}

Получаю массив элементов через API и сравниваю их с typeNames (своими) и через сравнение выключаю те элементы, которые не находятся в массиве переданным через API
т.е typeNames = 0 , 1 , если в апи совпадает все (0, 1 ) то элементы все активные, если нет, то один из них становится disabled
Классика, ничего сложного.
Делал различные проверки - все переданные через .map элементы - имеют true. Разбирал полученный массив из API - данные обновляются, все правки приходят без ошибок.
В консоли со strict модом никаких ошибок.
Как дебажить - не могу понять.
Сам компонент рендерится через .map с актуальными данными
redux не использую
upd: сами компоненты тоже через .map прогоняю с key. Соответственно в каждой позиции генерируется свой блок

Comments

[Егор Живагин]

Покажите весь компонент, пожалуйста, а то так есть вероятность того, что просто что-то не указано в зависимостях useMemo, например

И не до конца понятно, что у вас в types и index в вызове classNames

[CHtommy]

import React, {useState} from 'react';
import './index.scss';
import classNames from "classnames";

function Card({ types, name, urlCard, summary})  {
    const typeNames = ['set1', 'set2'];
    const [activeType, setActiveType] = useState(0);

    const onSelectType = (index) => {
        setActiveType(index)
    }
    return (
          <div className="shop_card">
            <div className="img_card">
              <img
                className="image"
                src={urlCard}
                alt="set1"
              />
            </div>
            <div className="title_card">
              <h2>{name}</h2>
            </div>
            <div className="setting_card">
              <div className="block_settings">
                <div className="group_setting">
                    {typeNames.map((type, index) => (
                        <div
                            key={type}
                            onClick={() => onSelectType(index)}
                            className={classNames("item_settings",{
                                active: activeType === index && types.includes(index),
                                disabled: !types.includes(index),
                            })}>{type}</div>
                    ))}

                </div>
              </div>
              <div className="block_settings">
                <div className="group_setting">
                      <div className="item_settings">35 .</div>
                      <div className="item_settings">40 .</div>
                      <div className="item_settings">45 .</div>
                </div>
              </div>
            </div>
            <div className="buy_card">
              <div className="pay_ruble">от {summary} ₽</div>
              <button
                type="button"
                className="add_cart"
              >
                <div className="text_addcart">Добавить</div>
              </button>
            </div>
          </div>

    );
  }
export default Card;

[Alexandroppolus]

types - это ведь массив чисел?

[CHtommy]

Alexandroppolus, да, причем я пробовал вставлять обычные цифры, так и брать их в кавычки " ". Думал, ошибка в этом...

Answer 1

[CHtommy]

Всем спасибо, кто писал...Проблема была видимо в API, где-то внутри системы. Массив чисел "types" просто не хотел нормально числа выводить, попробовал ввести все сначала и заработало.