文章/答案/技术大牛

发布

社区首页 >问答首页 >在我添加了去抖动后，数据已停止返回

问在我添加了去抖动后，数据已停止返回
EN

Stack Overflow用户

提问于 2021-08-26 15:34:18

回答 1查看 47关注 0票数 0

我正在根据用户输入进行一个API调用onChange。我在中添加了一个去抖动，这样它就可以为每个单词发出请求。我在react final form FormSpy中这样做，因为这对其他领域也有影响。

import { FormSpy } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';
import _ from 'lodash';

function Component({
  handleFunction,
  input,
}: {
  handleFunction: any;
  input: any;
}) {
  const debouncedSave = useCallback(
    _.debounce(async (newValue) => await getSuggestedSections(newValue), 1000),
    [],
  );
  return (
    <FormSpy subscription={{ dirty: true, values: true }}>
      {() => (
        <OnChange name="item-name">
          {async (value) => {
            const data = await debouncedSave(value);
            console.log(value);
            console.log(data);
          }}
        </OnChange>
      )}
    </FormSpy>
  );
}

当我通过控制台记录数据时，即使我可以看到网络请求中的数据，它也是未定义的。

有什么想法吗？

reactjs

lodash

debouncing

回答 1

Stack Overflow用户

发布于 2021-08-26 15:57:54

你不能等待useCallback函数，为了解决这个问题，我会在useCallback中处理promise的解析，并使用一个依赖于在useCallback中更新的状态的use效果。

下面是一个可运行的例子。忽略脚本错误，我已经通过脚本标记包含了babel运行时，以允许在代码片段中使用异步函数。

async function getSuggestedSections(value) {
  return new Promise((resolve) => setTimeout(resolve(value), 2000));
}

function ExampleComponent() {
  const [value, setValue] = React.useState("");
  const [data, setData] = React.useState(null);

  const debounceSave = React.useCallback(
    _.debounce(async (newValue) => {
      const data = await getSuggestedSections(newValue);
      setData(data);
      return data;
    }, 1000),
    []
  );

  const handleOnChange = async (evt) => {
    const { value } = evt.target;
    setValue(value);
    await debounceSave(value);
  };

  React.useEffect(() => {
    if (data) {
      console.log(`returned: ${data}`);
      // do stuff with data
    }
  }, [data]);

  return (
    <div>
      <input type="text" value={value} onChange={handleOnChange} />
    </div>
  );
}

ReactDOM.render(<ExampleComponent />, document.getElementById('root'));

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="root"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68941478

复制

相似问题

问在我添加了去抖动后，数据已停止返回
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我添加了去抖动后，数据已停止返回EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我添加了去抖动后，数据已停止返回
EN