React自定义Hook调用报错：Invalid hook call问题求助

问题核心原因 #

• 违反Hooks规则：在事件处理函数中调用自定义Hook，Hooks仅允许在函数组件的顶层作用域调用，不能在回调、循环、条件判断等嵌套逻辑中使用。
• Hook调用方式错误：const [array]= useMooves; 未执行Hook（缺少调用括号），导致无法获取状态值。
• 自定义Hook内部问题：存在语法错误（无循环的continue语句），且直接修改state数组违反React状态不可变原则，同时每次调用Hook都会重置state，无法保留状态。

修正后的代码实现 #

1. 重构自定义Hook（useMooves.js）

import { useState } from "react";

function useMooves() {
  // 初始化数组状态
  const [array, setArray] = useState([1, 2, 3, 4]);

  // 定义数组更新方法，接收索引参数
  const updateArray = (index) => {
    // 遵循不可变原则，创建原数组的副本
    const newArray = [...array];
    // 避免索引越界
    if (index >= newArray.length) return;
    
    if (index <= 5) {
      newArray[index] += 1;
    } else {
      newArray[index] -= 1;
    }
    // 更新状态
    setArray(newArray);
  };

  // 返回当前数组和更新方法
  return [array, updateArray];
}

export default useMooves;

2. 修正容器组件（Container.js）

import useMooves from "../utils/mooves";
import Circle from "./Circle";

function Container() {
  // 正确调用Hook，获取状态和更新方法
  const [array, updateArray] = useMooves();

  return (
    <ul>
      {/* 遍历数组渲染子组件，注意变量名不要用内置对象Array */}
      {array.map((number, index) => (
        <Circle
          key={index}
          clickHandler={updateArray}
          index={index}
          number={number}
        />
      ))}
    </ul>
  );
}

export default Container;

3. 修正Circle组件

function Circle({ clickHandler, index, number }) {
  return (
    <li onClick={() => clickHandler(index)}>
      {number} {/* 显示数组中的实际数值 */}
    </li>
  );
}

export default Circle;

关键修正说明 #

• Hook调用规范：所有Hook调用都放在组件顶层，避免在事件回调中调用，彻底解决Invalid hook call错误。
• 状态不可变：修改数组时创建副本，确保React能检测到状态变化并触发组件重渲染。
• 职责分离：自定义Hook负责状态管理和更新逻辑，组件负责UI渲染和事件触发，符合React设计模式。

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