React结合Redux Hooks调用useDispatch、useSelector报组件命名规则错误

AI 小北

2026-10-27

报错根源

你遇到的问题是React Hooks规则校验直接触发的，不存在复杂的逻辑bug：

React 的静态代码检查逻辑明确要求：函数组件的名称必须以大写英文字母开头，只有满足这个命名规则的函数，才会被识别为合法的React函数组件，才允许在函数内部调用各类React Hook API
你当前定义的函数是const clientes = () => {}，全小写开头，检查工具会把它判定为普通的业务工具函数，而普通函数是不允许调用useDispatch、useSelector这类Hook的，因此直接抛出了校验错误，报错信息里也已经直接点明了这个规则要求。

具体修改方案

第一步：把组件函数名改成大写开头，即将clientes调整为Clientes
第二步：解决命名冲突问题：你在组件内部通过useSelector取的状态变量也叫clientes，和函数重名会导致变量作用域覆盖，建议把内部状态变量重命名为语义更清晰的clientesList
第三步：补充组件默认导出，否则上层路由、页面无法正常渲染这个组件

修改后的正确代码示例：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';

// 组件名首字母大写，符合React组件识别规则
const Clientes = () => { 
    const dispatch = useDispatch();
    // 内部状态变量改名，避免和组件名重名冲突
    const clientesList = useSelector(state => state.clientes.clientes);
    
    //.... 剩余业务代码
}

export default Clientes;