React Hook传值问题：调用useMediaLinkImage触发Hook规则报错

错误的核心是React Hook不能在普通回调函数内部调用。你的useMediaLinkImage是自定义Hook，必须遵循React的Hook规则：只能在React函数组件的顶层作用域，或者其他自定义Hook的顶层作用域调用，不能嵌套在普通函数、循环、条件判断里。你原来的onEdit是普通函数，每次触发时都会调用Hook，直接违反了这个规则。

修复步骤 #

1. 将Hook调用移到组件顶层：在组件的最外层（所有回调函数之外）调用useMediaLinkImage，拿到它提供的触发方法（比如打开媒体选择器的函数）。
2. 新增状态保存编辑索引：因为图片选择是异步操作，需要先记录当前要编辑的图片索引，等选择完成后再用这个索引更新状态。
3. 修改onEdit逻辑：让onEdit只负责设置当前编辑的索引，并触发媒体选择器。

修改后的完整代码示例 #

import { useState } from 'react';

const YourComponent = () => {
  // 原有的nodeImages状态
  const [nodeImages, setNodeImages] = useState(/* 你的初始值 */);
  // 新增：保存当前正在编辑的图片索引
  const [editingIndex, setEditingIndex] = useState<number | null>(null);

  // 顶层调用useMediaLinkImage，处理图片选择完成后的逻辑
  const openMediaSelector = useMediaLinkImage((selectedImg) => {
    if (editingIndex === null) return;

    // 不可变更新状态：复制原数组，修改对应索引的项
    setNodeImages(prevImages => {
      const updatedImages = [...prevImages];
      updatedImages[editingIndex] = {
        ...updatedImages[editingIndex],
        image: {
          ...updatedImages[editingIndex].image,
          image: selectedImg
        }
      };
      return updatedImages;
    });

    // 选择完成后清空编辑索引
    setEditingIndex(null);
  });

  // 修改后的onEdit函数
  const onEdit = (index: number) => {
    setEditingIndex(index);
    openMediaSelector(); // 触发媒体选择器
  };

  // 原有的其他回调函数（onEmpty、onValueChange等）
  // ...

  return (
    <div>
      {nodeImages.map(({ image, mode }, index) => (
        <Image
          key={index}
          mode={mode}
          image={image}
          onEmpty={onEmpty}
          onChange={onValueChange}
          onSubmit={onSubmit}
          onToggle={onToggle}
          onEdit={() => onEdit(index)}
          onAdd={addImage}
        />
      ))}
    </div>
  );
};

关键注意点 #

• 不可变状态更新：不要直接修改原数组（比如imgData[index] = ...），必须返回新的数组/对象，否则React可能检测不到状态变化，导致组件不重新渲染。
• Hook调用位置：所有Hook必须在组件顶层调用，确保每次组件渲染时Hook的调用顺序一致，这是React Hook依赖的核心机制。

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