React中的Flickity细胞选择器

Question

基本上我有一个下拉列表，其中每个选项都有一个与图像ID相对应的属性。我的目标是在选择一个选项时转到该图像。为此，我尝试使用：

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

somevar最初设置为#someid，当我单击按钮时，它会完全转到具有该ID的单元格。

一旦我更新了somevar的值，问题就开始了。一旦我这样做，然后单击按钮，我会得到以下错误："无法读取null的属性"selectCell"；

我记录了初始somevar和更新的somevar。除了身份证本身，它们完全相同，所以我不知道哪里出了问题。我试着切换静态和重载OnUpdate设置，但没有帮助。

这里有一个更完整的例子，可以更好地展示我正在尝试做的事情：

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>
</>
)
}

任何想法或建议都将不胜感激：(

Answer 1

从下拉菜单切换到按钮，只是为了简化整个过程，看看哪里出了问题。看起来flickity只直接接受值，而不接受来自state或任何其他变量的值。

这项工作：

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>

如果有人知道这是一件轻率的事情，或者(更有可能(我做错了什么，我仍然会感谢一些建议，这样我下次会更清楚：(