谁能告诉我我在这里做错了什么?(反应钩子)

Question

我正在尝试使用useDebounce在handleChange函数中。但是我得到以下错误

React Hook "useDebounce"在函数"handleChange"它既不是React函数组件，也不是自定义React Hook函数。React组件名必须以大写字母开头。(react-hooks/rules-of-hooks)

代码如下

import "./styles.css";
import { useEffect, useState } from 'react'
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
return () => {
clearTimeout(timer)
}
}, [value, delay])
return debouncedValue
}
const handleChange = (e) => {
let debouncedValue = useDebounce(e.target.value, 500);
console.log('debouncedValue', debouncedValue);
}
export default function App() {

return (
<div className="App">
<input type="text" placeholder="Search" onChange={(e) => {handleChange(e)}} />
</div>
);
}

请求是否有人能说明我在这里做错了什么。

Answer 1

Issue

和错误状态一样，在回调中调用React钩子是无效的。

参见Hooks规则

• 不要在循环、条件或嵌套函数中调用Hooks。
不要从普通JavaScript函数中调用Hooks。

解决方案看起来你真的想要废除handleChange回调处理程序。

导入一个debcing实用程序或创建自己的简单debounce高阶函数

的例子:

const debounce = (fn, delay) => {
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => fn(...args), delay);
}
};

用法:

export default function App() {
const [value, setValue] = useState(value);
const handleChange = e => {
setValue(e.target.value);
}
const debouncedHandler = debounce(handleChange, 500);

return (
<div className="App">
<input type="text" placeholder="Search" onChange={debouncedHandler} />
</div>
);
}

Answer 2

React中的Hooks只能从React组件或其他Hooks中调用。
React似乎通过它们的名称方案来验证钩子/组件。
即—钩子以"use"开头，组件以大写字母开头。

查看React的钩子规则章节。

所以这里发生的事情是，你试图在一个常规函数中使用你的自定义useDebounce钩子。
这相当于试图在React组件外使用useState或useEffect，并且会产生相同的错误。

解决方案是要么改变命名方案，要么改变代码的结构。

Answer 3

试一下

import React, { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}
export default function App() {
const [term, setTerm] = React.useState('');
const debouncedValue = useDebounce(term, 500);
const handleChange = (e) => {
setTerm(e.target.value);
console.log('debouncedValue', debouncedValue);
};
return (
<div className="App">
<input
type="text"
placeholder="Search"
onChange={(e) => {
handleChange(e);
}}
/>
{debouncedValue}
</div>
);
}