过滤器方法在react/redux, typescript中不能正常工作

Question

不能弄清楚为什么过滤器方法在减速器" showCurImg"不能正常工作。我正在尝试过滤我的状态"画廊"。这是一个对象数组，其中对象包含File(用户上传的图像)和id，它应该返回带有id的me对象，但返回空数组。

例如，如果我用'!=='，它返回一个包含代理对象的数组"在里面。我的代码有什么问题?

这是我的切片

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../../app/store";
export interface imgItem {
  imgItem: File;
  id: number;
}
export interface imgs {
  preview: imgItem[];
  gallery: imgItem[];
  curImg: {};
}
const initialState: imgs = {
  preview: [],
  gallery: [],
  curImg: {},
};
export const imgsSlice = createSlice({
  name: "userImgs",
  initialState,
  reducers: {
    previewImgs: (state, action: PayloadAction<imgItem[]>) => {
      state.preview = action.payload;
    },
    cleanPreview: (state) => {
      state.preview = [];
    },
    addToGallery: (state, action: PayloadAction<imgItem[]>) => {
      state.gallery = [...state.gallery, ...action.payload];
    },
    showCurImg: (state, action: PayloadAction<Number>) => {
      const gal = state.gallery;
      const filteredArray = gal.filter((item) => item.id === action.payload);
      console.log(filteredArray);
    },
  },
});
export const { previewImgs, addToGallery, cleanPreview, showCurImg } =
  imgsSlice.actions;
export const imgsArr = (state: RootState) => state.getImgs.preview;
export default imgsSlice.reducer;

从用户

接收文件的组件

import React, { ChangeEvent } from "react";
import { useAppDispatch, useAppSelector } from "../app/hooks";
import Preview from "./Preview";
import {
  addToGallery,
  cleanPreview,
  previewImgs,
} from "../features/imgs/imgsSlice";
import styles from "./FormImgs.module.css";
export default function FormImgs() {
  const { preview } = useAppSelector((state) => state.getImgs);
  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const chosenFiles = Array.prototype.slice.call(e.target.files);
    const res = [];
    for (const item of chosenFiles) {
      const imgId = Math.random();
      res.push({ imgItem: item, id: imgId });
    }
    console.log(res);
    dispatch(previewImgs(res));
  };
  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    dispatch(addToGallery(preview));
    dispatch(cleanPreview());
    console.log(preview);
  };
  const dispatch = useAppDispatch();
  return (
    <div className={styles.form}>
      <p>Add an amazing photo from your device to your gallery</p>
      <form action="#" onSubmit={submitHandler}>
        <div className={styles.selectBtn}>
          <input
            type="file"
            accept="image/*"
            multiple
            onChange={changeHandler}
            title="Select images"
            id="select"
            style={{ display: "none" }}
          />
          <label htmlFor="select">Select file</label>
        </div>
        {preview.length ? (
          <>
            <Preview />
            <button type="submit">Add to gallery</button>
          </>
        ) : (
          ""
        )}
      </form>
    </div>
  );
}

Answer 1

问题是通过Math.random()创建id。我应该使用&;parsefloat &;而不是"parseInt">