我有一个呈现文件列表的组件。它的方法是简单的添加、更新和删除。我遇到了尖叫关闭问题的行为，但我不知道是什么。该组件将 state 中的文件列表存储为数组。所以在渲染时我只是映射它们。更新项目的工作正如您所期望的那样，所以我相信正在为该方法传递正确的 id，但删除总是传递映射的最后一个项目的 id。

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

然后我点击更新 #2 - 一切正常 文件 #2 设置为我放在那里的任何文件，状态反映了正确的列表。

但是如果我尝试删除文件 #1 或 #2 文件 #3 将被删除。

我错过了什么？

// npm modules
import React, { useState } from 'react';
import randomstring from 'randomstring';

// components
import { PrimaryButton, InlineButton } from "../buttons/buttons";
import { AdminInput } from "../inputs/textInputs";

export const AdminSlides = ({ setSlides }) => {
  const [ state, updateState ] = useState({
    slides: [],
  });

  function setState(value){
    updateState( prevState => ({
      ...prevState,
      ...value
    }));
  }

  function addSlide(){
    const slides = state.slides;
    const id = randomstring.generate({ length: 5, charset: 'alphabetic' })
    slides.push({ id, slide: null });
    setState({ slides });

    // send current state to parent component
    if (setSlides) setSlides(state.slides);
  }

  function removeSlide(id){
    const slides = state.slides.filter(item => item.id !== id);
    setState({ slides });
  }

  function setSlide(file, id){
    const slides = state.slides.map(item => {
      if (item.id === id) item.slide = file;
      return item;
    });
    setState({ slides });

    // send current state to parent component
    if (setSlides) setSlides(state.slides);
  }
  return (
      <div>
        {
          state.slides.map(slide => (
              <div className='m-b:1'>
                <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>
          ))
        }
        <PrimaryButton onClick={addSlide}>Add Slide</PrimaryButton>
      </div>
  )
};