Question

我有一个呈现文件列表的组件。其上的方法是简单的添加，更新和删除。我遇到了尖叫关闭问题的行为，但我不知道是什么。该组件将处于状态的文件列表存储为数组。因此，在渲染时，我只需将它们映射。更新项目的工作原理与您预期的一样，因此我相信该方法将传递正确的ID，但删除操作始终会传递映射到的最后一个项目的ID。

因此，如果我添加了3个项目： 1.文件＃1 2.文件＃2 3.文件＃3

然后我单击以更新＃2-所有工作均按预期方式进行，＃2设置为我放置在其中的任何文件，并且状态反映了正确的列表。

但是如果我尝试删除文件＃1或＃2，文件＃3就会被删除。

我想念什么？

            Dim trydef1 As String = D_Drive & "\Cloud Documents\"

            Dim txtFiles = Directory.GetFiles(trydef1)

            For Each filenm As String In txtFiles
            'process the file here
            Next

Answer 1

当您不使用键或将键用作索引时，这种意外行为很常见。

只需使用slide.id作为键，即可解决您的问题。

 {
          state.slides.map(slide => (
              <div className='m-b:1' key={slide.id}>
                <AdminInput
                    type='file'
                    onChange={e => setSlide(e.target.files[0], slide.id)}
                    className='m-b:.5'
                />
                <InlineButton className='m:0' onClick={()=>removeSlide(slide.id)}>Remove</InlineButton>
              </div>
          ))
        }

Answer 2

如https://reactjs.org/docs/lists-and-keys.html所述，

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份：

因此，如果您在map函数内部的div元素中添加key属性，则将解决您的问题。

  return (
      <div>
        {
          state.slides.map((slide, index) => (
              <div key={slide.id} className='m-b:1'>
                <input
                    type='file'
                    onChange={e => setSlide(e.target.files[0], slide.id)}
                    className='m-b:.5'
                />
                <button className='m:0' onClick={()=>removeSlide(slide.id)}>Remove</button>
              </div>
          ))
        }
        <button onClick={addSlide}>Add Slide</button>
      </div>
  )

Answer 3

就我而言，我已经提供了所有密钥。因为我使用的是 Slick Slider 组件。所有组件都相互渲染（一个在另一个下面）。对于活动滑块，增加 z-index 和 position:relative 解决了上述问题。

.slick-active {
            .see-more{
                z-index: 10;
                position: relative;
            }
        }

为什么在react应用程序中仅更改地图功能中的最后一项？

3 个答案: