React调用useSelector报错：所在函数非组件或自定义Hook如何解决

报错核心原因 #

该报错本质是违反React Hook使用规则，和Redux的state取值逻辑无关，错误在组件识别阶段就已触发。
React规则要求：函数组件名必须首字母大写，小写开头的函数会被识别为普通JavaScript函数，不允许在内部调用任意React Hook（包括react-redux提供的useSelector）。当前代码中组件定义为function posts()，首字母小写是触发报错的直接原因。

具体修改步骤 #

1. 修正Posts.js组件命名与变量冲突 #

同时注意不要让内部变量和组件名、reducer名重名，避免后续逻辑冲突，修正后代码如下：

// Posts.js 修正后完整代码
import React from 'react'
import Post from './Post/Post'
// 自定义Hook规范：以小写use开头，建议style.js导出的样式Hook同步命名为useStyles
import useStyles from "./style"
import {useSelector} from "react-redux"

// 核心修正：组件名首字母大写
function Posts() {
    const classes = useStyles()
    // 变量名改为postsData避免和组件名、reducer名重名
    const postsData = useSelector((state) => state.Posts)
    console.log(postsData)
    return (
        <div>
            <h1>POSTS</h1>
            <Post/>
            <Post/>
        </div>
    )
}

export default Posts

2. 规范优化（可选） #

如果./style文件导出的是makeStyles生成的样式Hook，建议将原命名UseStyles改为useStyles，符合React自定义Hook必须以use开头的规则，避免后续触发其他Hook规则校验报错。

生效验证 #

修改保存后开发服务器会自动热重载，如果仍然报错可删除项目下node_modules/.cache文件夹后重启开发服务器，清除缓存即可正常运行。

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