我正在尝试创建一个React钩子,它返回一个钩子的用户将调用的函数。钩子在钩子内部创建一个函数。
这里有一个最小的例子
// fetch.js
import { useEffect, useState} from "react";
export const useFetch = () => {
const [fn, setFn] = useState(null);
useEffect(() => {
const fn_ = () => console.log("test")
setFn(fn_)
}, []);
return fn;
}
// App.js
import { useFetch } from './fetch';
function App() {
const fn = useFetch()
return (
<div className="App">
hello
</div>
);
}
我也禁用了严格模式。
// index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
虽然我没有调用fn()
,但我看到它正在执行并输出控制台日志。
你知道为什么会这样吗?我很确定我做错了什么,但不知道是什么。
编辑:
感谢您在下面的回答。在React FAQ中找到了解释https://react.dev/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead
1条答案
按热度按时间eimct9ow1#
将函数传递给状态设置器的问题在于,它假定您正在使用函数更新。
就像我在上面的评论中说的,效果钩子和状态完全是多余的,你尤其不应该把它用于函数