小编典典

使用setState反应使用去抖动

reactjs

背景

假设我们都debounce从了解函数lodash

如果用户输入快速1121231234,它允许我们继续警告只有一次,有1234,有一定的延迟时间后。

这是用于减少请求数量以进行优化的常用方法。


描述

对于普通的输入字段,我们可以使用这种输入格式debounce并且它可以正常工作。

问题 :一旦我们添加了一个setState具有相同的回调中debounce,将debounce不会工作正常。

有人知道原因吗?

import React, { useState } from "react";
import "./styles.css";
import { debounce } from "lodash";

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = debounce(value => {
    alert(`request: ${value}`);
  }, 1000);
  const onChange = e => {
    setInput(e.target.value); // Remove this line will lead to normal debounce
    debouceRequest(e.target.value);
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

编辑华而不实的装备


阅读 328

收藏
2020-07-22

共1个答案

小编典典

试试看(使用useCallback):

import React, { useState, useCallback } from "react";
import "./styles.css";
import { debounce } from "lodash";

const request = debounce(value => {
  alert(`request: ${value}`);
}, 1000);

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = useCallback(value => request(value), []);

  const onChange = e => {
    debouceRequest(e.target.value);
    setInput(e.target.value); // Remove this line will lead to normal denounce
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

编辑elated-dawn-lb5ex

2020-07-22