React 和 redux 工具包：如何​​添加从拖放事件中获取数据的 reducer

如何解决React 和 redux 工具包：如何​​添加从拖放事件中获取数据的 reducer

React 和 redux 非常新。我正在尝试向我的 React 应用程序添加文件拖放功能，但在使用 redux 时遇到了问题 工具包的 createSlice 函数。

我不断收到“TypeError：无法读取未定义的属性“fileList””。我认为这是因为我搞砸了下面 searchSlice.js 中的 addFilesToList 减速器。

任何帮助将不胜感激。请看我下面的代码：

searchSlice.js

import { createSlice } from '@reduxjs/toolkit'


export const searchSlice = createSlice({
    name:'search',initialState: {
        fileList: [],inDropZone: false,},reducers: {

        addToDropZone: (state) => {
            return state.inDropZone = true
        },addFilesToList: (state,e) => {
            return state.fileList = [...e.dataTransfer.files]
        }
    }
})

export const { addToDropZone,addFilesToList } = searchSlice.actions

export default searchSlice.reducer

DragDrop.js

import React from 'react'
import { useSelector,usedispatch } from 'react-redux'
import { addToDropZone,addFilesToList } from './searchSlice.js'
import DragArea from './DragArea.js'
import TableArea from './TableArea.js'

//import img from './components/images/drag.PNG'//


const DragDrop = (props) => {

    const files = useSelector((state) => state.searchSlice.fileList)
    const inDropZone = useSelector((state) => state.searchSlice.inDropZone)
    const dispatch = usedispatch()
    //const { data,dispatch } = props//


    const handledragenter = (e) => {
        e.preventDefault();
        e.stopPropagation();

        dispatch(addToDropZone());
    };
    const handleDragLeave = (e) => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = 'copy';
        dispatch(addToDropZone());
    };
    const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();

        dispatch(addFilesToList());
        dispatch(addToDropZone());

        if (files && files.length > 0) {
            const existingFiles = files.map(f => f.name)
            files = files.filter(f => !existingFiles.includes(f.name))


        }

    };


    if (inDropZone === true && files.length === 0) {
        return(
                <div className = "drag-and-drop" 
                    onDrop={handleDrop}
                    onDragOver= {handleDragOver}
                    ondragenter={handledragenter}
                    onDragLeave={handleDragLeave}>
                    <DragArea  />
                </div>
        )
    } else {
        return(
            <div className = "table-area" 
                onDrop={handleDrop}
                onDragOver= {handleDragOver}
                ondragenter={handledragenter}
                onDragLeave={handleDragLeave}>
                <TableArea data = {files} />
        </div>
        )
    } 
}


export default DragDrop;

解决方法

您的 addFilesToList 减速器中的 e 类型是 PayloadAction。这意味着它的形状是这样的：

{
  type: “search/addFilesToList”,payload: valueYouPassToActionCreator
}

valueYouPassToActionCreator 是您在分发 addFilesToList 操作创建器时传递给它的任何内容，例如：

dispatch(addFilesToList(valueYouPassToActionCreator))

然而，你正在做：

dispatch(addFilesToList())

这意味着您的 PayloadAction 上的 .payload 属性未定义。简而言之，您需要将某些内容传递给动作创建者。