Question

我一直在尝试找到一种使用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);
    }

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

Answer 1

我假设您在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。当然，您可以按照自己的代码做自己喜欢的事，但是当与他人合作或寻求帮助时，遵守约定有助于保持清晰的沟通。

在功能上反应useEffect

1 个答案: