Ant Design Select在开始时不需要键入即可获取数据

Question

我使用的是Ant Design Select。

CodeSandBox URL

根据上面的例子，当我开始键入时，Select将开始使用fetchUserList加载数据。有没有什么方法可以让它先加载所有数据？所以当我在加载的列表中键入它的唯一搜索时？我一直在考虑这个问题，但没有解决办法。非常感谢。

Answer 1

根据您的代码，您使用的是声讨选择，这种选择的想法是通过API在列表上搜索和获取，并使用回调来打印搜索结果，通过声讨处理来减少请求数量。。。

因此，我认为使用它来获取所有数据，然后再次触发搜索是不正确的，如果你需要的话，只需要使用普通的antd选择，这样你就可以搜索并列表将被预定义或获取或通过状态。。。

正常选择示例一：

import { Select, Spin } from "antd";
const { Option } = Select;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select mode="tags" style={{ width: "100%" }} onChange={handleChange}>
{children}
</Select>,
document.getElementById("container")
);

现在，回到您的例子，如果您仍然需要它，您可以构建函数来获取所需的数据，并将其放在以下选项中：

选项.push({标签："；Anees 1〃；，值："；Anees"；，})

例如，如果选项为空，并且搜索仍然没有开始推送这些数据。。。作为一个例子，我以简单的方式添加了它，以解释如何调用它

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
function DebounceSelect({ fetchOptions, debounceTimeout = 800, ...props }) {
const [fetching, setFetching] = React.useState(false);
const [options, setOptions] = React.useState([]);
const fetchRef = React.useRef(0);
const debounceFetcher = React.useMemo(() => {
const loadOptions = (value) => {
fetchRef.current += 1;
const fetchId = fetchRef.current;
setOptions([]);
setFetching(true);
fetchOptions(value).then((newOptions) => {
if (fetchId !== fetchRef.current) {
// for fetch callback order
return;
}
setOptions(newOptions);
setFetching(false);
});
};
return debounce(loadOptions, debounceTimeout);
}, [fetchOptions, debounceTimeout]);
console.log(options);
if(options.length === 0){// Example condition, its not fully handling
options.push({
label: "Anees 1",
value: "Anees",
})
}
console.log(options);
return (
<Select
labelInValue
filterOption={false}
onSearch={debounceFetcher}
notFoundContent={fetching ? <Spin size="small" /> : null}
{...props}
options={options}
/>
);
} // Usage of DebounceSelect
async function fetchUserList(username) {
console.log('fetching user', username);
return fetch('https://randomuser.me/api/?results=5')
.then((response) => response.json())
.then((body) =>
body.results.map((user) => ({
label: `${user.name.first} ${user.name.last}`,
value: user.login.username,
})),
);
}
const Demo = () => {
const [value, setValue] = React.useState([]);
return (
<DebounceSelect
mode="multiple"
value={value}
placeholder="Select users"
fetchOptions={fetchUserList}
onChange={(newValue) => {
setValue(newValue);
}}
style={{
width: '100%',
}}
/>
);
};
ReactDOM.render(<Demo />, document.getElementById('container')); 

Answer 2

我制作了一个自定义挂钩来获取基于滚动的数据Antd在PupScroll上提供我们可以使用此获取数据

import { useEffect, useState } from 'react';
import { getAllUsers } from '@api/users';
export default function usefetchUsers(pageNumber: number, limit: number) {
const [userLoading, setLoading] = useState(true);
const [usersError, setUserError] = useState(false);
const [users, setUsers] = useState([]);
const [hasMore, setHasMore] = useState(false);
useEffect(() => {
setLoading(true);
setUserError(false);
fetchAllUsers();
}, [pageNumber]);
const fetchAllUsers = async () => {
setLoading(true);
const allUsers = await getAllUsers(pageNumber, limit);
if (allUsers?.hasError) {
setUsers([...users]);
setUserError(allUsers?.errorMessage);
setLoading(false);
setHasMore(false);
} else {
if (allUsers && allUsers?.data?.length > 0) {
const usersData = allUsers?.data?.map((item) => {
return {
value: item.id,
label: item.name,
};
});
const checkMore = Boolean(parseInt(allUsers?.data?.page?.totalPages) > 1);
setHasMore(checkMore);
setLoading(false);
setUsers([...users, ...usersData]);
}
}
};
return { userLoading, usersError, users, hasMore };
}

用法

const { users: newUsers, hasMore } = usefetchUsers(pageNumber, limit, false);

OnScroll触发此功能

const onScroll = async (event, type) => {
const target = event.target;
const V = Math.ceil(target.scrollTop) + target.offsetHeight;
console.log(V);
if (V === target.scrollHeight) {
target.scrollTo(0, target.scrollHeight);
const page = pageNumber + 1;
if (isMore) {
setUsersLoading(true);
const allUsers = await getAllUsers(page, limit);
if (allUsers?.hasError) {
setUsers([...users]);
setUserError(allUsers?.errorMessage);
setUsersLoading(false);
setIsMore(false);
} else {
if (allUsers && allUsers?.data?.data.length > 0) {
const usersData = allUsers?.data?.data.map((item) => {
return {
value: item.id,
label: item.name,
};
});
const checkMore = Boolean(parseInt(allUsers?.data?.page?.totalPages) > 1);
setIsMore(checkMore);
setIsMore(false);
setUsers([...users, ...usersData]);
setUsersLoading(false);
}
}
}
}

选择组件usgae

<FieldWrapper
label={'Select Supplier'}
error={supplierError && 'Please select a Supplier.'}
>
<Select
style={{
width: '100%',
}}
loading={supplierLoading}
mode="multiple"
options={Suppliers}
onChange={handleSupplierSelect}
value={selectedSuppliers}
onPopupScroll={(e) => onScroll(e, 'supplier')}
maxTagCount={'responsive'}
placeholder="Select a Supplier"
/>
</FieldWrapper>