反应: useState/useEffect -如何实时收集10个项目

Question

我试图获得10个用户名时，我键入一个击键。现在，只有当用户名正好在jsonplaceholder列表中时，它才会给出一个用户名。所以，当我输入"Karia“时，只有输入"Karianne”才会返回。

因此，例如，如果输入的第一个字母"A"，我想返回前10个项目，这是匹配的jsonplaceholder列表。如果我输入一个"R"，在那之后，它的"Ar“，我想要得到前10个匹配的"Ar”用户名，像Aron，Ariel，Aria等等。

有人有主意吗？

export const Search = () => {
    const [user, setUser] = useState(null);
    const [searchQuery, setSearchQuery] = useState("")

    useEffect(() => {
        if (searchQuery.length > 0) {
            const fetchFunc = async () => {
                const response = await fetch(`https://jsonplaceholder.typicode.com/users?username=${searchQuery}`)
                const resJSON = await response.json();
                setUser(resJSON[0]);
            };
            fetchFunc();
        }
    }, [searchQuery]);

    return (
        <Flex className={styles.search__container}>
            <Flex className={styles.search__elements}>
                <InputGroup className={styles.search__input}>
                    <InputRightElement
                        className={styles.search__inputElements}
                        children={<RiSearchLine className={styles.search__icon} />} />

                    <Input
                        className={styles.search__users}
                        type='search'
                        placeholder='Search'
                        onChange={event => setSearchQuery(event.target.value)}
                    />
                    {user ? (
                        <div>
                            <h3>{user['name']}</h3>
                            <h3>{user['username']}</h3>
                            <h3>{user['email']}</h3>
                        </div>
                    ) : (
                        <p>No user found</p>
                    )}
                </InputGroup>
            </Flex>
        </Flex>
    )
}

Answer 1

这里的主要限制是API方面。您的API应该为您提供类似的名称。如果没有，那你就做不了什么。

Answer 2

也许API提供了一种检索具有部分名称的用户的方法(但我怀疑情况会是这样)。否则，您可以检索所有用户一次，并简单地显示一个适合您的需求，每次您写东西。

总之:当您的组件被挂载(在开始时)，获取所有的用户，并存储他们。您将只执行此API调用一次。

然后，每次你写东西的时候，只要选择10个用户，他们的名字就包括你写的东西。

Answer 3

理想情况下，这应该由API来处理，您应该关注何时触发或重新触发API调用。

API为您提供了一个名称列表，从名称列表中分割出一组10，并在用户中设置它，然后将它们映射到您的UI中。

此外，您还可以进一步优化函数，取消API调用。