Reactjs 反应-Can'；不要在自定义挂钩中使用挂钩

我有个奇怪的问题。我正在尝试在reactjs中创建新的钩子。但是我不能在我的自定义钩子中使用useffect、useState和其他React钩子。我正在研究，但找不到任何解决办法。这是我的定制挂钩：

导出函数useStore（初始状态）{
常量[状态，设置状态]=使用状态（初始状态）；
常数存储=状态；
退货店；
}

当我尝试使用时：useStore（'foo'）；我得到这个错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See error link to react (I can't share link...) for tips about how to debug and fix this problem.

我还试图删除代码中的useState钩子。这就是为什么在我看来，问题是钩子。有人能帮我吗

---

谢谢：）

这是精心设计的。只能从React函数中调用/使用钩子。在这里看到更多

你需要重新思考你的方法。在组件中使用不同的挂钩，而不是在挂钩中使用

import React, {useState} from 'react';
import {useCustomHookOne} from '../hooks/custom-hook';
import {useCustomHookTwo} from '../hooks/custom-hook';
export default function MyComponent(props) {
    const [state, actions] = useCustomHookOne(initialState, {useState});
    const [state, actions] = useCustomHookTwo(initialState, {useState});
}

---

我猜这是关于你调用

useStore

的地方，你没有显示。该调用应该在React函数或另一个自定义钩子中，但可能不是

可以从自定义钩子中调用钩子，如下所述：

不要从常规JavaScript函数调用钩子。相反，您可以： ... 从自定义钩子调用钩子

---

它在删除

useState

时起作用，因为实际上是这个内置钩子发出了错误（请参见）。

您可以在自定义钩子中使用钩子。考虑这两个例子。

ex1：提升子组件的状态

自定义的

useCounter

hook向我们展示了如何编写将状态向上发送到父组件的小型子组件-

const useCounter=（init=0）=>
{const[value，setValue]=useState（init）
返回[
价值
设置值（值-1）}>-
{value}
设置值（值+1）}>+
]
}

在

MyApp

中，当调用

useCounter

时，我们得到有状态值和有状态计数器组件-

const initialOrder=
{松饼：0，蛋糕：0，馅饼：0，…}
常量MyApp=（{order=initialOrder}）=>{
const[muffins，muffinCounter]=使用计数器（order.muffins）
const[cakeCounter，cakeCounter]=使用计数器（order.cakes）
const[pies，piescenter]=使用计数器（order.pies）
// ...
返回

松饼：{muffinCounter}
蛋糕：{cakeCounter}
馅饼：{馅饼店}
// ...

}

我们可以制作类似这样的组件

uselider

customhook-

constuseslaider=（{min=0，max=0，init=0}）=>
{const[value，setValue]=useState（init）
返回[
价值
setValue（e.target.value）}
/>
]
}

以及由自定义挂钩制成的自定义挂钩，

usePicker

-

constusepicker=（{values=[]，init=0}）=>
UseSlaider（{min:0，max:values.length-1，init}）

constmyapp=（{order=initialOrder}）=>{
const[muffins，muffinCounter]=使用计数器（order.muffins）
const[cakeCounter，cakeCounter]=使用计数器（order.cakes）
const[pies，piescenter]=使用计数器（order.pies）
恒速=[“慢”、“中”、“快”、“当天”]
const[送货速度，提货员]=
usePicker（{values:speeds，init:order.deliverySpeed}）
// ...
返回

松饼：{muffinCounter}
蛋糕：{cakeCounter}
馅饼：{馅饼店}
速度：{speeds[deliverySpeed]}{speedPicker}
// ...

}

运行下面的代码以查看操作中的

useCounter

、

uselider

、和

usePicker

-

const{useState，useffect}=React
常量useCounter=（init=0）=>
{const[value，setValue]=useState（init）
返回[
价值
设置值（值-1）}>-
{value}
设置值（值+1）}>+
]
}
常量UseSlaider=（{min=0，max=0，init=0}）=>
{const[value，setValue]=useState（init）
返回[
价值
setValue（e.target.value）}
/>
]
}
常量usePicker=（{values=[]，init=0}）=>
UseSlaider（{min:0，max:values.length-1，init}）
常量初始顺序=
{松饼：0，蛋糕：0，馅饼：0，送货速度：3}
常量MyApp=（{order=initialOrder}）=>{
const[muffins，muffinCounter]=使用计数器（order.muffins）
const[cakeCounter，cakeCounter]=使用计数器（order.cakes）
const[pies，piescenter]=使用计数器（order.pies）
恒速=[“慢”、“中”、“快”、“当天”]
const[送货速度，提货员]=
usePicker（{values:speeds，init:order.deliverySpeed}）
const onSubmit=e=>
log（“已提交”、{松饼、蛋糕、馅饼、deliverySpeed}）
返回

松饼：{muffinCounter}
蛋糕：{cakeCounter}
馅饼：{馅饼店}
速度：{speeds[deliverySpeed]}{speedPicker}
{JSON.stringify（{松饼、蛋糕、馅饼、送货速度}）
提交（打开控制台读取输出）

}
ReactDOM.render（，document.body）

正文{
保证金：0自动；
字体系列：monospace；
}
保险商实验室{
填充：0；
}
李{
列表样式类型：无；
背景色：鬼影白；
填充：0.25rem；
边缘底部：0.25雷姆；
}

挂钩看起来不错。你能给我们一个带有这个钩子的组件导致错误的例子吗？但是在文档中，它说我们可以在自定义钩子中使用钩子。只需要在自定义钩子函数名中加上“use”前缀。我有一个。。。在这个例子中，他在CustomHook中使用了useState。对此很抱歉。我在真实的react组件中使用它。我正在尝试创建自定义挂钩。。。所以它应该能起作用，但它不能。我不想在常规JavaScript函数中处理它。@EmirhanEngin哦，好的。你能给我看一下通话组件吗？非常感谢。。。我试图在类组件中使用它。