React组件调用useAppDispatch等Hook触发规则报错的问题求助

报错原因 #

你遇到的ESLint报错核心原因是：React函数组件的命名必须以大写字母开头。当前你定义的组件是小写的page1，ESLint会将其判定为普通函数而非React组件，因此不允许在其中调用useAppDispatch、useSelector这类React Hook。

解决步骤 #

• 修改组件名称为大写开头，遵循React组件的命名约定（同时满足ESLint react/jsx-pascal-case规则要求）
• 同步修正导出语句，保证组件定义与导出名称一致

修正后的代码示例 #

page1.tsx（重命名为Page1.tsx或直接修改组件名）

import { useSelector } from 'react-redux';
import { counter1Selector } from '../store/slices/counter1Slice';
import { useAppDispatch } from "../store/store";

// 组件名改为大写开头的Page1
export default function Page1({}: Props) {
  const dispatch = useAppDispatch();
  const counter1State = useSelector(counter1Selector);

    return (
        <div>
          <h4>Page1</h4>
          <button
            onClick={() => {}}
          >
            counter1 - {counter1State.counter}
          </button>
    
          <button
            onClick={() => {}}
          >
            Async counter1 - {counter1State.counter}
          </button>
        </div>
      );
}

额外优化：简化counter1Slice的初始状态结构

你的counter1Slice中initialState写成了{initialValues}，会导致状态嵌套（需要通过counter1State.initialValues.counter访问值），可以直接将initialValues作为初始状态，简化后续取值：

// counter1Slice.ts
const counter1Slice = createSlice({
    name:'counter1',
    // 直接使用initialValues作为初始状态，避免嵌套
    initialState: initialValues,
    reducers:{},
    extraReducers:(builder)=>{

    }
})

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