반응 자동 검색 입력 완료 (온스 제거)

또 다른 요구 사항이 많은 기능은 다음과 같습니다.
사용자가 입력한 내용에 따라 데이터베이스에 있는 조언을 표시해야 합니다.
그것은 보통 전자상거래에 사용된다. 왜냐하면 사용자 체험을 개선하고 구매 속도를 높일 수 있기 때문이다.
우리의 예시에서 우리는 API를 백엔드로 사용할 것이다
이것은 매개 변수에 따라 사용할 공공api를 찾을 수 있도록 합니다.
그리고 사용자 유형에 따라 검색어에 맞는 공공api 목록을 보여 주는 입력을 만듭니다.

이 구성 요소의 경우 다음 라이브러리가 필요합니다.
사선 추가axios(api 요청)
스타일링 구성 요소 추가 * (javascript로 css를 만들려면 일반sass 파일에서 코드를 실현할 수 있습니다)
실에lodash를 넣습니다.debounce (잠시 후 자세히 설명합니다)
시작해보도록 하겠습니다.
우선, 우리의 요청을 만듭니다.js 파일
이것은api에 요청을 보내는 것을 책임질 것입니다

const url = axios.create({
    baseURL: 'https://api.publicapis.org/',
});

export const getApiSuggestions = (word) => {
    let result = url
        .get(`/entries?title=${word}`)
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            return error;
        });

    return result;
};

검색 인풋 구성 요소를 만듭니다. 우선 스타일이 필요하고, 스타일링 구성 요소를 빌려야 합니다.

import styled from 'styled-components';

export const Input = styled.input`
    width: 222px;
    height: 51px;
    padding: 10px;
    background: #f3f3f3;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    border: none;
`;

export const Ul = styled.ul`
    display: contents;
`;

export const Li = styled.ul`
    width: 222px;
    font-weight: bold;
    height: 51px;
    padding: 10px;
    background: #f5f0f0;
    display: block;
    border-bottom: 1px solid white;
    &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.14);
    }
`;

export const SuggestContainer = styled.div`
    height: 240px;
    width: 242px;
    overflow: scroll;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
`;

현재 우리의 구성 요소

import React, { useState, useCallback } from 'react';

import { Input, Ul, Li, SuggestContainer } from './style';

export default function SearchInput({
    loading,
    options,
    requests,
    placeholder,
}) {
    const [inputValue, setInputValue] = useState('');

    const updateValue = (newValue) => {
        setInputValue(newValue);
        requests(newValue);
    };

    return (
        <div>
            <Input
                value={inputValue}
                onChange={(input) => updateValue(input.target.value)}
                placeholder={placeholder}
            />
            <SuggestContainer>
                <Ul>
                    {loading && <Li>Loading...</Li>}
                    {options?.entries?.length > 0 &&
                        !loading &&
                        options?.entries?.map((value, index) => (
                            <Li key={`${value.API}-${index}`}>{value.API}</Li>
                        ))}
                </Ul>
            </SuggestContainer>
        </div>
    );
}

이제 매개변수를 살펴보겠습니다.
로드: 이 상태는 부모로부터 전달됩니다. 요청할 때 로드 메시지를 표시할 수 있습니다.
옵션: 이것은 우리가 제안한 대상 그룹으로 표시하기를 원합니다.
요청: 이것은 우리가 그 중에서 검색을 실행할 요청입니다. 부모는 이 기능을 가지고 있지만, 이 기능을 실행하는 것은 이 구성 요소입니다.
다음과 같은 기능이 포함되어 있습니다.
업데이트 밸류: 저희는 기본적으로 제어 구성 요소를 사용합니다. 이 함수는 새로운 입력 값을 설정하고 이 값을 요청에 보냅니다.
렌더링 코드의 중요한 부분:

우선, 불러오는 것이 사실인지 확인합니다. 만약 그렇다면, 요청이 완료되었을 때 불러오는 값만 표시합니다
두 번째 검증은 불러오는 것이 잘못된 것인지 확인하고, 옵션 그룹에 표시할 값이 포함되어 있습니다. 그렇지 않으면 무시됩니다.
.? 연결 대상 체인에 있는 속성의 값을 읽을 수 있도록 선택할 수 있습니다. 체인의 모든 인용이 유효한지 명확하게 검증할 필요가 없습니다.
다시 말하면,entries 속성이 존재하지 않으면, 그룹이 존재하지 않거나, 빈 대상을 비추는 것을 피할 것이다
응용 프로그램 만들기

import React, { useState, useEffect } from 'react';
import { getApiSuggestions } from './requests';
import SearchInput from './searchInput';
import { MainWrapper } from './style';

function App() {
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);

    const getSuggestions = async (word) => {
        if (word) {
            setLoading(true);
            let response = await getApiSuggestions(word);
            setOptions(response);
            setLoading(false);
        } else {
            setOptions([]);
        }
    };

    const getApiUrl = (url) => {
        window.open(url, '_blank');
    };

    return (
        <MainWrapper>
            <SearchInput
                loading={loading}
                options={options}
                requests={getSuggestions}
                onClickFunction={getApiUrl}
                placeholder="find a public api"
            />
        </MainWrapper>
    );
}

export default App;

기능:
getSuggestions: 이것은 우리가 구성 요소에 전달할 함수입니다. 우선 검색할 값이 있는지 확인합니다. (빈 값을 보내지 않습니다. 이것은 무의미한 요청입니다.)
만약 그것이 존재하지 않는다면, 검색어가 비어 있을 때 제안을 표시하지 않도록 옵션 대상을 지울 것입니다.
다음에 async await를 이용하여 요청이 완료되고 값이 되돌아오기를 기다린 다음 옵션에 설정합니다. 이것은 구성 요소에 전달될 상태입니다.
getapiUrl: 이 함수를 구성 요소에 전달합니다. 기본적으로 새 옵션에서 URL을 열 것입니다.
상기 모든 기능이 있으면, 우리의 구성 요소는 다음과 같이 작업해야 한다.

그것은 작용을 했지만, 너는 문제를 보았니?
모든 편지에 대해api에 요청을 합니다.
이것은 해롭다. 만 명의 사용자가 당신의 프로젝트를 사용하고 있다고 상상해 봐라. 검색을 완성하기 위해 사용자마다 최종적으로api에 2만 개의 요청을 하는 것은 지속가능하지 못하고 엉망진창이다.
그러면 우리는 어떻게 해결해야 합니까?떨다
Bouncing에 가는 것은 무엇입니까?
이것은 임의의 횟수 (빠른 연속 호출일 수도 있음) 를 호출할 수 있는 함수로 되돌아오지만, 마지막 호출을 기다리는 xms만 호출됩니다.
검색 입력을 다시 만듭니다

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

import { Input, Ul, Li, SuggestContainer } from './style';

export default function SearchInput({
    loading,
    options,
    requests,
    onClickFunction,
    placeholder,
}) {
    const [inputValue, setInputValue] = useState('');

    const debouncedSave = useCallback(
        debounce((newValue) => requests(newValue), 1000),
        []
    );

    const updateValue = (newValue) => {
        setInputValue(newValue);
        debouncedSave(newValue);
    };

    return (
        <div>
            <Input
                value={inputValue}
                onChange={(input) => updateValue(input.target.value)}
                placeholder={placeholder}
            />
            <SuggestContainer>
                <Ul>
                    {loading && <Li>Loading...</Li>}
                    {options?.entries?.length > 0 &&
                        !loading &&
                        options?.entries?.map((value, index) => (
                            <Li
                                key={`${value.API}-${index}`}
                                onClick={() => onClickFunction(value.Link)}
                            >
                                {value.API}
                            </Li>
                        ))}
                </Ul>
            </SuggestContainer>
        </div>
    );
}

기능:
BouncedSave로 가기
우선 콜백을 사용하여 온라인 리셋과 의존 항목을 전달합니다.메모리 버전의 리셋을 되돌려줍니다. 의존 항목 중 하나가 변경되었을 때만 변경됩니다.
그리고lodash의 debounce를 사용합니다.우리는 이 기능이 일정 시간 후에 시작될 것이라고 알려 주었다.
이런 방식을 통해 우리는 특정 시간 후에 요청을 실행할 수 있을 뿐, 사용자가 미친 듯이 검색을 던지는 것이 아니라 진정한 검색을 작성할 수 있도록 허용한다.
우리들은 실천 중의 변화를 보고, 그것이 어떻게 일을 하는지 봅시다

유리카, 현재 Bouncing에 가는 기능은 일정 시간 후에만 요청을 실행합니다. 그러면 사용자에게 효과적인 검색어를 입력할 시간을 줍니다.
우리는 쓰레기 요청으로api를 채우는 것을 피하고 사용자 체험을 개선했습니다.
개선 사항:
이api는 제한이 없습니다. 정확한 방법은 응답 제한을 3–5로 설정하는 것입니다. 50개의 제안 목록을 표시하는 것이 가장 이상적이지 않기 때문입니다.3~5가지 옵션을 제안하는 것이 이상적입니다.
Complete Code