Раскрывающийся список с возможностью поиска в semanti c -ui-реагирует не сразу отображает полный список параметров, полученных из API - PullRequest
Новая
       47

Раскрывающийся список с возможностью поиска в semanti c -ui-реагирует не сразу отображает полный список параметров, полученных из API

1 голос
/ 18 марта 2020

Когда я пытаюсь вызвать API для заполнения параметров пользовательского интерфейса c, сначала он отображает часть параметров, и для отображения полного списка сначала нужно щелкнуть вне раскрывающегося списка (размыть его), затем нажать снова внутри.

Я застрял на этом некоторое время, и я действительно не могу придумать, что еще можно попробовать, кто-нибудь знает, почему он так себя ведет?

Вот код: 

import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
import axios from 'axios';

let typingTimer;

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            creators: [],
            creatorsLoading: true,
            selectedCreator: null
        };
        this.searchCreators = this.searchCreators.bind(this);
        this.setCreatorsState = this.setCreatorsState.bind(this);
        this.changeCreator = this.changeCreator.bind(this);
    }

    componentDidMount() {
        this.searchCreators();
    }

    setCreatorsState(res) {
        this.setState({
            creators: res.data.map((user) => {
                return { text: `${user.name} (${user.country})`, value: user.id };
            }),
            creatorsLoading: false
        });
    }

    searchCreators(searchQuery) {
        if (searchQuery === '') {
            this.setState({ creatorsLoading: false });
            return null;
        }
        this.setState({ creatorsLoading: true });

        const args = {
            params: {
                'search_query: searchQuery.trim();
            }
        };

        axios
            .get(url, args)
            .then((res) => {
                if ('error' in res)
                    return this.setState({ creatorsLoading: false });
                else {
                    this.setCreatorsState(res.data);
                }
            })
            .catch((err) => this.setState({ creatorsLoading: false }));
    }

    delayExecute(text) {
        //Detect keystroke and only execute after the user has finish typing
        clearTimeout(typingTimer);
        typingTimer = setTimeout(() => {
            return this.searchCreators(text);
        }, 700);
        return true;
    }

    changeCreator(value) {
        if (value) this.setState({ selectedCreator: value });
        else this.setState({ selectedCreator: null });
    }

    render() {
        const {creators, creatorsLoading, selectedCreator} = this.state;
        return (
            <Dropdown
                selectOnBlur={false}
                loading={creatorsLoading || false}
                clearable
                onChange={(_, data) => this.changeUser(data.value)}
                onSearchChange={(_, data) => this.delayExecute(data.searchQuery)}
                placeholder="Creators"
                fluid
                selection
                search
                value={selectedCreator}
                options={creators}
            />
        );
    }
}

export default App;

1 Ответ

0 голосов
/ 18 марта 2020

Я наконец выяснил, что было не так, поэтому на случай, если кто-нибудь наткнется на что-то похожее, вот оно:

Semanti c Поисковый выпадающий интерфейс пользовательского интерфейса выполняет поиск по умолчанию, поэтому я отправлял этот searchQuery в API и извлекает массив пользователей в соответствии с этим searchQuery, и после этого выпадающий список выполняет другой поиск внутри этого извлеченного массива для того же самого searchQuery. Поскольку текст, который я помещал в параметры, не соответствовал критериям, которые я искал в API, я получил разные результаты. 

this.setState({
    creators: res.data.map((user) => {
        return { text: `${user.name} (${user.country})`, value: user.id };
    }),
    creatorsLoading: false
});

И поскольку я использовал selectOnBlur={false}, когда нажимал вне выпадающий список, searchQuery опустошен и поиск по умолчанию не был выполнен, поэтому я получил правильный массив, который искал после размытия.

...