来自 lodash 的去抖在我的应用程序中不起作用

Question

正如标题所说，来自名为 lodash 的库的去抖动功能在我的应用程序中不起作用。我正在使用它来优化我的应用程序中的搜索功能。让我准确地向您描述我的代码是如何构建的。在一个名为 Users.js 的组件中，我实现了搜索功能，然后通过使用道具，我发送了 searchValue，以及允许搜索工作的 onChange 函数。

当我将 debounce 与 onChange 函数一起使用时，它不起作用。这是我的代码，以便更好地理解：

const Users = () => {
  const url = `${process.env.REACT_APP_API_URL}users?page=`;
  const searchUrl = `${process.env.REACT_APP_API_URL}users?name=`;

  const cellNames = [
    {
      name: "User Names",
      paddingRight: 230,
      paddingLeft: 40,
    },
    {
      name: "Email",
    },
    {
      name: "Status",
    },
    {
      name: "Gender",
    },
    {
      name: "Role",
    },
    {
      name: "Actions",
      align: "center",
      paddingRight: 40,
    },
  ];

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

  const handleSearch = (e) => {
    setSearchValue(e.target.value);
  };

  const debouncedHandleSearch = useMemo(() => debounce(handleSearch, 300), []);

  return (
    <Layout
      title="Users - Admin View"
      hasSearchBox={true}
      searchValue={searchValue}
      onChange={debouncedHandleSearch}
    >
      <LinkContainer>
        <CreateUserLink
          to={{
            pathname: "/users/new",
          }}
        >
          <CreateButton variant="filled" text="CREATE USER" />
        </CreateUserLink>
      </LinkContainer>
      <TableContainer data-testid="users-table">
        <TableComponent
          url={url}
          cellNames={cellNames}
          value={searchValue}
          searchUrl={searchUrl}
        />
      </TableContainer>
    </Layout>
  );
};

export default Users;

这是 Users.js 组件。

import React from "react";
import Searchbox from "Components/Searchbox";
import styled from "styled-components";

const LayoutContainer = styled.div`
  margin-left: 3.625em;
  margin-right: 4.5625rem;
  margin-top: 1rem;
`;

const TopLayoutContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const Title = styled.h1`
  font-size: 2.5rem;
`;

const Layout = ({ title, hasSearchBox, children, searchValue, onChange }) => {
  return (
    <LayoutContainer>
      <TopLayoutContainer>
        <Title>{title}</Title>
        {hasSearchBox ? (
          <Searchbox value={searchValue} onChange={onChange} />
        ) : (
          ""
        )}
      </TopLayoutContainer>
      {children}
    </LayoutContainer>
  );
};

export default Layout;

这是 Layout.js，如您所见，该组件具有名为 onChange 的属性，这就是我将搜索功能发送到该组件的方式。另外，如果您注意到，搜索框是一个组件，它的外观如下：

import styled from "styled-components";
import React from "react";
import Input from "Components/Input";

const SearchInput = styled(Input)``;

const Container = styled.div``;

const Searchbox = ({ value, onChange }) => {
  return (
    <Container>
      <SearchInput
        data-testid="searchbox-component"
        placeholder="Search..."
        type="Search"
        onChange={onChange}
        value={value}
      />
    </Container>
  );
};

export default Searchbox;

我真的不知道为什么这不起作用，如果有人知道任何解决方案，我将不胜感激。

Answer 1

它不起作用，因为您保留了输入去抖值。

要修复它，您需要两个状态：第一个保持输入值，第二个保持去抖动值。

将键入值传递到输入中，并将去抖动值传递到您的搜索api（或您需要去抖动的东西）。

Checkout this sandbox to experiment

来自 lodash 的去抖在我的应用程序中不起作用

Debounce from lodash is not working in my app

lodash

reactjs