React Hook之钩子调用规则（不在循环、条件判断或者嵌套函数中调用）

hooks使用规则

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）

错误使用案例

代码：

  const useCustomItemRender = (originNode: React.ReactNode, file: CustomUploadFile) => {const [editing, setEditing] = useState(false);const [newName, setNewName] = useState(file.name);const handleEdit = () => {setEditing(true);};const handleSave = () => {setEditing(false);handleEditDescription(file.uid, newName);};const render = editing ? (<div><Inputvalue={newName}onChange={(e) => setNewName(e.target.value)}onPressEnter={handleSave}onBlur={handleSave}autoFocus/></div>) : (<div onClick={handleEdit}>{file.name}</div>);return render;};const customItemRender: ItemRender<CustomUploadFile> = (originNode, file) => {const render = useCustomItemRender(originNode, file);return render;};

报错：
React Hook “useCustomItemRender” is called in function “customItemRender: ItemRender” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use”.

报错解释：
这个错误表明你在React函数组件中使用了名为useCustomItemRender的自定义钩子（Hook），而这个钩子的使用发生在一个内嵌函数customItemRender中。React的钩子（Hooks）只能在函数组件的主体或者其他钩子中调用，而不能在嵌套函数或者控制流逻辑中调用。这个规则被称为“钩子调用规则”。

解决方法：
确保useCustomItemRender只在组件的主体中调用一次。如果customItemRender是一个独立的函数，你应该将useCustomItemRender的调用移到customItemRender函数外部，确保它不会在customItemRender内部被调用。如果customItemRender是一个React组件，那么应该将useCustomItemRender的调用保持在该组件的主体中。

// 不正确的使用方式
function MyComponent() {function customItemRender() {const [value, setValue] = useCustomItemRender(); // 错误，在内嵌函数中调用钩子// ...}// ...
}// 正确的使用方式
function MyComponent() {const [value, setValue] = useCustomItemRender(); // 正确，在组件主体中调用钩子function customItemRender() {// 使用value和setValue// ...}// ...
}

如果useCustomItemRender是一个自定义的钩子，它应该遵循React的钩子调用规则，即不在循环、条件判断或者嵌套函数中调用。如果需要在多个地方复用状态逻辑，可以考虑使用自定义组件或高阶组件。

总结：在内嵌函数 customItemRender 中调用了自定义的钩子 useCustomItemRender，而 React 钩子（Hooks）只能在函数组件的主体或其他钩子中调用，不能在嵌套函数中调用。

案例具体解决方法

为了解决这个问题，我们需要将 customItemRender 函数转换为一个自定义的 React 组件，以便在组件主体中调用钩子。

  const CustomItemRender: React.FC<{ originNode: React.ReactNode, file: CustomUploadFile }> = ({ originNode, file }) => {const render = useCustomItemRender(originNode, file);return render;};const customItemRender: ItemRender<CustomUploadFile> = (originNode, file) => {const render = <CustomItemRender originNode={originNode} file={file} />;return render;};

这段代码定义了一个名为 CustomItemRender 的组件，并将其用作 customItemRender 函数的返回值。

通过将 customItemRender 函数转换为一个自定义的 React 组件 CustomItemRender，我们可以在组件主体中调用钩子。