Блог

Главная - Вопросы по программированию - Невозможно работать с состоянием после установленного пакета react

Невозможно работать с состоянием после установленного пакета react

#reactjs #state

#reactjs #состояние

Вопрос:

У меня есть приложение react, и для отображения слайдера фотографий я установил tiny-slider-react пакет, я установил его и настроил, он работает нормально, пока я не попытаюсь что-то сделать с состоянием, даже когда я пытаюсь сделать что-то подобное:

 const [count, setCount] = useState(0)
  useEffect(() => {
    setCount(23)
  },
[])

эту ошибку я получаю каждый раз введите описание изображения здесь

я не могу аннулировать использование состояния. Пожалуйста, как я могу выяснить, что происходит, и как я могу это решить?

UPD:

  <BackgroundLayer theme="lightPink2">
  <PageContent paddingTop marginTop>
    <Chapter title={title} description={description} className="logos" />
    <div className="is-mobile is-hidden-desktop is-hidden-tablet">
      <TinySlider settings={settings} onTouchMove={(event) => setIndex(event.index)}>
        {renderLogos(logos, "slider-padding", "slider__image")}
      </TinySlider>
      <div className="squares">
        {aaaaaaa.map(a => (
          <div key={guuid()} className={a.val} />
        ))}
      </div>
    </div>
  </PageContent>
</BackgroundLayer>

Настройки UDP2:

 const settings = {
  nav: false,
  mouseDrag: true,
  controls: false,
  loop: false,
  }

UPD3: Вот как выглядит метод RenderLogos

   const renderLogos = (logos, firstClass, secondClass) => {
   return (
    <>
      {logos.map(s => (
        <div key={guuid()} className={firstClass}>
          {s.map(({ logo: { title, file: { url } } }) => (
            <Logo
              url={url}
              title={title}
              key={guuid()}
              styleClass={secondClass}
            />
          ))}
        </div>
      ))}
    </>
  )
}

Комментарии:

1. можете ли вы показать нам код, в котором вы используете tiny-slider-react?

2. @tudor.gergely готово

3. что такое настройки? а что такое renderLogos? можете ли вы добавить код и для них?

4. @tudor.gergely добавил UDP 2

5. как насчет renderLogos? как это выглядит?

Ответ №1:

Проблема в том, что вы рендерите React.Фрагмент (1 элемент), в то время как библиотека предполагает, что вы будете отображать несколько элементов как дочерние для TinySlider.

Попробуйте изменить renderLogos на это:

 const renderLogos = (logos, firstClass, secondClass) => {
  // render a list directly, not a list inside a fragment
  return logos.map((s) => (
    <div key={guuid()} className={firstClass}>
      {s.map(({ logo: { title, file: { url } } }) => (
        <Logo url={url} title={title} key={guuid()} styleClass={secondClass} />
      ))}
    </div>
  ));
};