时间戳

首页 > 解决方案 > 安装包 react 后无法操作状态

reactjs - 安装包 react 后无法操作状态

问题描述

我有反应应用程序和显示照片滑块我安装了tiny-slider-react包，我安装它并配置它工作正常，直到我尝试对状态做一些事情，即使我尝试做这样的事情：

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

我每次都会遇到这个错误在此处输入图像描述

我不能使用状态无效。请问我怎样才能弄清楚发生了什么，我该如何解决？

升级版：

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

标签： reactjsstate

解决方案

问题是您正在渲染 React.Fragment（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>
  ));
};

推荐阅读