test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

docs(mentions): fix debounce demo bug (#35653)

Browse Source
This commit is contained in:
dingkang 2022-05-20 15:34:02 +08:00 committed by GitHub
parent 905eada4a4
commit 8af11c6ef5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/mentions/demo/async.md
View File

@ -14,16 +14,15 @@ title:
async
```tsx
import React, { useState } from 'react';
import React, { useState, useCallback, useRef } from 'react';
import { Mentions } from 'antd';
import debounce from 'lodash/debounce';
const { Option } = Mentions;
const App: React.FC = () => {
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(false);
const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
const ref = useRef<string>();
const loadGithubUsers = (key: string) => {
if (!key) {
@ -34,22 +33,22 @@ const App: React.FC = () => {
fetch(`https://api.github.com/search/users?q=${key}`)
.then(res => res.json())
.then(({ items = [] }) => {
if (search !== key) return;
if (ref.current !== key) return;
setLoading(false);
setUsers(items.slice(0, 10));
});
};
const debounceLoadGithubUsers = debounce(loadGithubUsers, 800);
const debounceLoadGithubUsers = useCallback(debounce(loadGithubUsers, 800), []);
const onSearch = (newSearch: string) => {
console.log('Search:', newSearch);
setSearch(newSearch);
setLoading(!!newSearch);
const onSearch = (search: string) => {
console.log('Search:', search);
ref.current = search;
setLoading(!!search);
setUsers([]);
debounceLoadGithubUsers(newSearch);
debounceLoadGithubUsers(search);
};
return (