删除之前的输入图像文件后无法添加它

Question

我这里有一个非常奇怪的问题。我输入了

type="file"

，当我添加图像时，它会添加 ofc，当我单击删除时，它会被删除，但我无法添加相同的图像，而我不添加不同的图像。

即删除后无法添加相同的图像

 <input
          type="file"
          accept="image/*"
          alt="upload image"
          className="product-images-input"
          name="image"
          onChange={e => handleAddImages({ target: e.target })}
          multiple
          hidden
          ref={filesRef}
        />

有添加项目和删除项目的功能

  const handleAddImages = ({ target: { files } }) => {
    for (const file of files) {
      const newImg = {
        url: URL.createObjectURL(file),
        name: file.name,
        id: new Date().getTime(),
      };
      dispatch(addImages([...images, newImg]));
    }
  };

  const handleDeleteImg = id => {
    const newImages = images.filter(item => item.id !== id);
    dispatch(deleteImg(newImages));
  };

我不明白我错在哪里，请帮助我

const initialState = {
  productFields: {
    images: [],
  },
};

const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    addImages: (state, action) => {
      const payload = action.payload;
      state.productFields.images = payload;
    },
    deleteImg: (state, action) => {
      const payload = action.payload;
      state.productFields.images = payload;
    },
  },
});

Answer 1

可能当您单击“删除”时（不清楚您是如何执行此操作的，因为您没有提供删除控制代码），您不会清除 元素中的所选值，因此它保留了先前选择的值。 因此，当您再次选择同一文件时，所选文件将变得与之前相同，并且不会引发“更改”事件，因为其值没有任何更改。

我看到两种解决方法：

1. 文件删除后显式清除元素值
2. 使用“输入”事件而不是“更改”