在用户拥有某些值后调用API 2秒

Question

我想知道在用户输入这些值之后，是否有一种在几秒钟内调用API的方法。

此逻辑在Saga middleware中实现，其中takeLatest关键字用于获取最新值并进行api调用。

import { takeLatest} from 'redux-saga/effects';

function* watchTheRequest() {
    const watcher = yield takeLatest('SOME_TYPE', callMySaga);
    yield take(LOCATION_CHANGE);
    yield cancel(watcher);
}

我正试图在React钩子中实现同样的功能。

的要求是：一旦用户停止输入，就进行API调用。

const [search, setSearch] = useState("")
useEffect(() => {
    //wait for user to stop updating the search.
    // call API.
}, [search])

不确定是否需要使用以下任一项来完成此任务

var intervalID = setInterval(alert, 1000); 
setTimeout(alert, 1000);

Answer 1

这很可能叫做“脱欧”。使用useEffect进行极简的实现：

const [search, setSearch] = useState("");

const toBeCalled = () => {
 // call your API here
}

useEffect(() => {
   const timer = setTimeout(toBeCalled, 1000);
   return () => clearTimeout(timer);
}, [search]);

Answer 2

这叫做Debounce技术，你可以在这里查一下

您可以尝试使用此实现。

const timeoutId = useRef();
const [searchTerm, setSearchTerm] = useState('');

const onSearchChange = (newSearchTerm) => {
  // Wait for 300ms after users stop typing
  // then dispatch to get the suggestions
  clearTimeout(timeoutId.current);

  timeoutId.current = setTimeout(() => {
    if (newSearchTerm.length >= 2) {
      dispatch(getSuggestions(newSearchTerm));
    }
  }, 300);
};

Answer 3

如果您正在使用React 18，则可以使用useDeferredValue。

  const [search, setSearch] = useState("")
  const deferredSearch = useDeferredValue(search)
  useEffect(() => {
     //wait for user to stop updating the search.
     // call API.
  }, [deferredSearch])
  ......

}

检查此博客以获取更多信息