添加多个组件时反应重复的列表项？答案

【问题标题】：React duplicating list items when adding multiple components?添加多个组件时反应重复的列表项？
【发布时间】：2021-08-31 08:56:18
【问题描述】：

以下链接指向我正在从事的项目的代码框。 SideNav 列表项与用于导航的幻灯片相匹配。问题是，当我将另一个不同的组件（例如其他组件）添加到 slideshow.js 的返回语句时，列表项被丢弃/不正确/重复。我无法弄清楚为什么并且正在考虑它是一个反应的东西，或者可能是我正在使用的依赖项？到目前为止，控制台日志记录对我没有多大帮助。

ps：列表项由 AppContext.js 中的“幻灯片标题”类索引。

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>

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

【问题讨论】：

标签： reactjs arraylist components array.prototype.map react-slideshow-image

【解决方案1】：

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

【讨论】：