Блог

В принципе, у меня есть выпадающий список, в котором каждая опция имеет атрибут, соответствующий идентификатору изображения. Моя цель — перейти к этому изображению при выборе варианта. Для этого я пытаюсь использовать:

   const myCustomNext = () => {
    flkty.selectCell(somevar)
 };
 

somevar изначально имеет значение #someid, когда я нажимаю на свою кнопку, она отлично переходит в ячейку с этим идентификатором.

Проблема возникает, как только я обновляю значение somevar . Как только я это делаю, а затем нажимаю на кнопку, я получаю следующую ошибку: «Не удается прочитать свойство ‘selectCell’ с нулевым значением»

Я зарегистрировал как начальный somevar, так и обновленный. Кроме самого идентификатора, они абсолютно идентичны, поэтому я понятия не имею, где я ошибаюсь. Я попытался переключить статические настройки и перезагрузить обновление, но это не помогло.

Вот более полный пример, который может лучше показать, что я пытаюсь сделать:

 const FlickTest = () => {

    const [varimg, setVarimg] = useState("#cG9zdDoxNA");
    let flkty = null;

    function setVariant(e) {
        let index = e.target.selectedIndex;
        let optionElement = e.target.childNodes[index]
        let option = optionElement.getAttribute('data-imgid');
        setVarimg(`#${option}`);

    }

    const myCustomNext = () => {
        flkty.selectCell(varimg)
    };

    return (
        <>
            <button onClick={myCustomNext}>My custom next button</button>

            <select onChange={setVariant}>
                {variants.map((variant) =>
                    <option data-imgid={variant.gallerie[0].id} value={variant.farbe} key={variant.farbe}>{variant.farbe}</option>
                )}
            </select>

            <Flickity
                flickityRef={c => (flkty = c)}
                className={'carousel'}
                elementType={'div'}
                options={flickityOptions}
                disableImagesLoaded={true}
                reloadOnUpdate={true}
                static={true}
            >
                {variants.map((galitem) =>
                    galitem.gallerie.map((galimg) =>
                        <div key={galimg.id} id={galimg.id.replace(/[^ws]/gi, '')}>
                            <span>{galimg.id}</span>
                            <Image fluid={galimg.localFile.childImageSharp.fluid} />
                        </div>
                    )
                )}
            </Flickity>
        </>
    )
}
 

Любые идеи или указания будут высоко оценены 🙂

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

Это работает:

  const selectSlide = (e) => {
  flkty.selectCell( `.${e.target.getAttribute("data-selector")}` )
};

...

<button onClick={selectSlide} data-selector={variant.gallerie[0].id} key={variant.farbe}>{variant.farbe}</button>
 

Если кто-нибудь знает, является ли это проблемой flickity или (что более вероятно) Я делал что-то совершенно неправильное, я все равно был бы признателен за некоторые указания, чтобы в следующий раз я знал лучше 🙂