去抖动后设置 TextField 值不起作用

Question

在 TextField matirial ui 中设置值后，搜索字段未按预期工作。我希望能够在我完成输入 2000 毫秒后在我的列表中搜索用户，如果我点击一个用户查看详细信息，然后我返回，我希望能够再次看到输入，为此我认为我需要在 TextField 设置值。

下面的代码正在运行。 2000ms 用户停止输入后开始搜索输入，但是当我回来时，输入字段为空，但我仍然有我搜索的特定用户

  const handleDebouncedSearch = useCallback(
    debounce(getUsers, 2000),
    [],
  );
    

<TextField
          id="search"
          label={t('search')}
          onChange={(e) => {
            handleDebouncedSearch(e.target.value);
            console.log(e.target.value);
          }}
        />

但是一旦我添加值并开始输入它就会失败。我只能添加一个字母，并且必须等待 2000 毫秒才能输入另一个字母

const handleDebouncedSearch = useCallback(
        debounce(getProcessedCandidates, 2000),
        [],
      );
        

    <TextField
              id="search"
              label={t('search')}
              onChange={(e) => {
                handleDebouncedSearch(e.target.value);
                console.log(e.target.value);
              }}
              value={user.filter.searchQ}
            />

另外，如果我在 console.log 中“user.filter.serchQ”是去抖值

Answer 1

如果我理解正确，您将要实现的是在 2000 毫秒后触发搜索功能。这里的问题是改变搜索值是去抖动的。您应该有一个函数/方法来更改搜索值并在其中调用去抖动搜索函数。

像这样，例如：

const [searchValue, setValue] = useState(0)

const handleDebouncedSearch = (value) => {
    setValue(value)
    debounce(getProcessedCandidates, 2000)
};

const getProcessedCandidates = () => {
    // search goes here...
}

<TextField
              id="search"
              label={t('search')}
              onChange={(e) =>
                handleDebouncedSearch(e.target.value)
              }
              value={searchValue}
            />

提示：您还可以使用 useEffect 并在每次 searchValue 更改时触发去抖动搜索。

如果这是您所期望的，请告诉我。