添加多个组件时反应复制列表项？

Question

下面的link是我正在做的一个项目的codesandbox。 SideNav 列表项与导航幻灯片匹配。问题是，当我将另一个不同的组件（例如其他组件）添加到 slideshow.js 的 return 语句时，列表项被抛出 off/incorrect/duplicated。我无法弄清楚为什么并且正在考虑它是一种反应，还是我正在使用的依赖项？到目前为止，控制台日志记录对我帮助不大。

ps：列表项由 AppContext.js.

中的“slide-title”class 索引

https://codesandbox.io/s/test-r4ov3?file=/src/App.js

这很好用

<Fragment>
      <Slide ref={slideRef} {...slideProperties} className="slide-container">
        {SlideData.map((item, index) => (
          <p key={index} className="slide-title">
            {item.title}
          </p>
        ))}
        
      </Slide>
    </Fragment>

这不

 <Fragment>

      <Slide ref={slideRef} {...slideProperties} className="slide-container">
        {SlideData.map((item, index) => (
          <p key={index} className="slide-title">
            {item.title}
          </p>
        ))}
        <div className="slide-title">Other</div><---ADDED
      </Slide>
    </Fragment>

添加之前-列表项匹配添加组件后 - 列表项重复？

Answer 1

这是 GitHub 存储库中报告的 3.4.7 版 react-slideshow-image 中解决的错误。还有一个解决方法，您可以使用 {[...mappeditems, SomeOtherComponent/>]} 但现在应该没有必要了。

添加多个组件时反应复制列表项？

React duplicating list items when adding multiple components?

reactjs

arraylist

components

array.prototype.map

react-slideshow-image