React Redux调用useSelector报undefined is not a function错误排查

报错本质是你对undefined值调用了数组专属的.map()方法：

undefined is not a function (near '...(0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(state => state.files).map...')

代码里useSelector((state) => state.files.files)的返回值在渲染时是undefined，不是预期的数组，所以调用.map()直接抛出错误。出现这个问题通常是两个原因：

• Redux的files切片初始状态没有正确配置files数组字段，或者首次渲染时切片还未完成初始化，链式取值拿到undefined
• Store配置时reducer的挂载键名和useSelector里的取值路径不匹配，导致取到的不是目标切片对象

1. 组件侧增加空值兜底 #

不要直接在useSelector返回值后链式调用map，增加可选链和空值合并逻辑，默认兜底为空数组，从根源避免undefined调用map的问题，修正后的FileList组件代码如下：

import React from 'react';
import './fileList.css'
import { useSelector } from "react-redux";
import File from "./File/File";

const FileList = () => {
   // 增加空值兜底，state.files不存在、或者state.files.files不存在时默认取空数组
   const rawFiles = useSelector((state) => state.files?.files ?? []);
   const files = rawFiles.map((file) => <File key={file.id} file={file}/>)

    return (
        <div className="container">
            <div className='filelist'>
                <div className="filelist__header">
                    <div className="filelist__name">name</div>
                    <div className="filelist__date">date</div>
                    <div className="filelist__size">size</div>
                </div>
                {files}
            </div>
        </div>
    );
};

export default FileList;

注：原代码表头的data是笔误，已修正为和字段对应的date

提供的File组件代码本身没有逻辑问题，只要上层传入正确的file对象即可正常渲染。

2. 检查Redux侧配置 #

• 确认files切片的初始状态必须显式声明files字段为数组类型，参考示例：

// files切片初始状态示例
const initialState = {
  files: [], // 不可缺省该字段，必须初始化为空数组
  // 其他业务字段...
}

• 检查store的reducer挂载配置，确认挂载键名和useSelector的取值路径完全匹配。比如你配置store时写的是fileSlice: filesReducer，那取值路径就必须是state.fileSlice.files，路径写错会直接取到undefined。

内容的提问来源于stack exchange，提问作者Nick