Реакция: Тип "логический" не может быть присвоен типу " filterOpenStateI

#javascript #reactjs

Вопрос:

Я создаю меню, которое должно иметь состояние, чтобы позже я мог отслеживать, открыто оно или нет. Поэтому я решил использовать Reacts useState (), и на данный момент у меня есть проблема, из-за которой я не могу обновить состояние таким образом в своем JSX:

 {filterOpenState[`${filterTab.id}`] == true ? <TiTimes /> :<BiDownArrowAlt />}

В этой строке я получаю еще одну ошибку: Element implicitly has an 'any' type because index expression is not of type 'number'.

Вот как я определяю состояние и интерфейс:

  type filterOpenStateI = {
    [key: string]: boolean
  }    
const filterOpenState = useState<filterOpenStateI >({
        filterType: false,
        filterFlag: false,
        filterPriceRange: false,
      })
    
      const handleMenuState = (e: any)=>{
       e.preventDefault();
       const filterTabId = e.target.closest('div').id
       // Switch the value from state
       filterOpenState[filterTabId] = !filterOpenState[filterTabId]
      }

Я не уверен, что делаю это так, как должен filterOpenStateI был работать, когда я определял filterOpenState без useState, но только диктант. Но затем, после того, как дикт изменился, компонент react сделал то же самое, потому что, я думаю, это не заставило реагировать на повторный рендеринг? Как я могу исправить эту проблему?

Ответ №1:

filterOpenState является неизменяемым, вам просто разрешено изменять его с помощью функции setState. В вашем коде есть 2 ошибки

useState возвращает массив, в котором 1-й элемент является объектом, а 2-й-функцией setState.
вы пытаетесь напрямую переназначить его значение. Это неправильный путь.