青岛做网站的费用,网站注册主机,大连网站建设咨询,网站托管公司哪家好文章目录 React Hook之钩子调用规则#xff08;不在循环、条件判断或者嵌套函数中调用#xff09;错误使用案例案例具体解决方法 React Hook之钩子调用规则#xff08;不在循环、条件判断或者嵌套函数中调用#xff09;
hooks使用规则
只能在函数最外层调用 Hook。不要在… 文章目录 React Hook之钩子调用规则不在循环、条件判断或者嵌套函数中调用错误使用案例案例具体解决方法 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 ? (divInputvalue{newName}onChange{(e) setNewName(e.target.value)}onPressEnter{handleSave}onBlur{handleSave}autoFocus//div) : (div onClick{handleEdit}{file.name}/div);return render;};const customItemRender: ItemRenderCustomUploadFile (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: ItemRenderCustomUploadFile (originNode, file) {const render CustomItemRender originNode{originNode} file{file} /;return render;};这段代码定义了一个名为 CustomItemRender 的组件并将其用作 customItemRender 函数的返回值。 通过将 customItemRender 函数转换为一个自定义的 React 组件 CustomItemRender我们可以在组件主体中调用钩子。
