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

Posted 2023-02-14

【中文标题】添加多个组件时反应重复的列表项？

【英文标题】：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 项目匹配之前 添加组件后 - 列表项重复？

【参考方案1】：

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