时间戳

首页 > 解决方案 > 在函数中反应 useEffect

javascript - 在函数中反应 useEffect

问题描述

我一直在尝试找到一种像这样使用 useEffect 的方法，但我认为我做得不对：

const [searching, setSearching] = useState(false);
function OnSearch(e) {
        const searchValue = e.target.value;
        useEffect(() => {
            setSearching(true);
        }, []);
        clearTimeout(timer);
        timer = setTimeout(() => {
            setSearching(false);
            window.location.href = '/block/' + searchValue;
        }, 2000);
    }

任何形式的帮助或指导将不胜感激。

标签： javascriptreactjs

解决方案

我假设useState您在那里使用过此代码位于功能组件内。您不需要或想要useEffect那里，只需将其删除并setSearching(true)直接执行：

const [searching, setSearching] = useState(false);
function OnSearch(e) {
    const searchValue = e.target.value;
    setSearching(true);
    clearTimeout(timer);
    timer = setTimeout(() => {
        setSearching(false);
        window.location.href = '/block/' + searchValue;
    }, 2000);
}

（事实上​​，你不仅不需要它，而且除了组件函数或钩子函数的顶层之外，你不能在任何地方使用钩子。所以不能在事件处理程序中使用。）

这就留下了timer变量的问题。它不能只是组件函数中的局部变量，因为它将在每次渲染时重新创建。对于这样的非状态实例数据，您可以通过 使用对象useRef，然后在该对象上使用属性，这将在组件的生命周期内保持一致：

const [instance] = useRef({});

所以这给了我们：

const [instance] = useRef({});
const [searching, setSearching] = useState(false);
function OnSearch(e) {
    const searchValue = e.target.value;
    setSearching(true);
    clearTimeout(instance.timer);
    instance.timer = setTimeout(() => {
        setSearching(false);
        window.location.href = '/block/' + searchValue;
    }, 2000);
}

旁注：在 JavaScript 中，最普遍的约定是只有构造函数和（在 React 中）组件函数被大写，而不是其他类型的函数。所以onSearch而不是OnSearch. 你当然可以在自己的代码中做你喜欢的事情，但是在与他人合作或寻求帮助时，遵守约定有助于保持沟通清晰。

推荐阅读