时间戳

首页 > 解决方案 > 将参数传递给函数回调

javascript - 将参数传递给函数回调

问题描述

我正在尝试在 lodash 中使用 debounce 来延迟 onChange，请参见下面的代码。

import React, { useState, useEffect, useCallback } from "react";
import { TopBar } from "@shopify/polaris";
import { debounce } from "lodash";

function SearchBar() {
  const [searchValue, setSearchValue] = useState("");

  const handleSearchFieldChange = ((value:string) => {
    setSearchValue(value);
  });

  const debounceLoadData = useCallback(debounce({searchValue} => fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData();
    console.log({searchValue})
  }, [searchValue]);

  function fetchData(value:string) {
    console.log("searchValue " + value);
  }

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchFieldChange}
      value={searchValue}
      placeholder="Search Value"
    />
  );

  return <TopBar searchField={searchFieldMarkup} />;
}

一开始，我想searchValue在 fetchData 函数中使用，但似乎因为范围，它无法读取它，尽管状态已更新，但它总是为空。

结果，我尝试将它从 中传递，debounceLoadData但我不知道如何做到这一点，因为 useCallback 是一个函数调用。我怎么能searchValue进去fetchData。debounce

标签： javascriptreactjstypescriptlodash

解决方案

lodash debounce 接受一个函数作为第一个参数。您可以简单地fetchData用作函数并传递searchValue给debounceLoadData，然后fetchData在调用时传递给

const debounceLoadData = useCallback(debounce(fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData(searchValue);
    console.log({searchValue})
  }, [searchValue]);

debounce 实际上返回一个函数，将 debounce 视为像这样实现

function debounce(func, wait) {
  let timeout
  return function(...args) {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(context, args), wait)
  }
}

所以基本上debounceLoadData是这里返回的函数，arguments passed to it i.e ...args然后被传递给原始函数 fetchDatafunc.apply(context, args)

也debounceLoadData只创建一次，因为回调依赖是[]，你是否将它作为依赖传递给 useEffect 不会有任何区别。

请阅读这篇文章以获取缺少依赖项警告

使用 useEffect React Hook 时如何修复缺少的依赖警告？

推荐阅读