初めて検索したときにカスタムオートコンプリートコンポーネントが出力を表示しない

J.range

カスタムオートコンプリート(オートサジェスト)コンポーネントを作成しました。ハードコードされた文字列の配列をオートコンプリートコンポーネントに渡すとすべて正常に機能しますが、APIからデータを小道具として渡そうとすると、初めて検索しても何も表示されません。結果は、初回の直後に毎回表示されます

さまざまなオプションを試しましたが、ユーザーが初めてデータを検索しているときにデータがなく、オートコンプリートが空の配列でレンダリングされているようです。同じAPIエンドポイントをテストしましたが、検索するたびにデータが返されます。

オートコンプリートを保持するホームコンポーネント

        const filteredUsers = this.props.searchUsers.map((item) => item.firstName).filter((item) => item !== null);

        const autocomplete = (
            <AutoComplete
                items={filteredUsers}
                placeholder="Search..."
                label="Search"
                onTextChanged={this.searchUsers}
                fieldName="Search"
                formName="autocomplete"
            />
        );

挿入されたデータをフィルタリングして提案のリストを表示するオートコンプリートコンポーネント。問題はおそらくonTextChange内にあります。

export class AutoComplete extends Component {
    constructor(props) {
        super(props);
        this.state = {
            suggestions: [],
            text: '',
        };
    }

    // Matching and filtering suggestions fetched from the backend and text that user has entered
    onTextChanged = (e) => {
        const value = e.target.value;
        let suggestions = [];
        if (value.length > 0) {
            this.props.onTextChanged(value);
            const regex = new RegExp(`^${value}`, 'i');
            suggestions = this.props.items.sort().filter((v) => regex.test(v));
        }
        this.setState({ suggestions, text: value });
    };

    // Update state each time user press suggestion
    suggestionSelected = (value) => {
        this.setState(() => ({
            text: value,
            suggestions: []
        }));
    };

    // User pressed the enter key
    onPressEnter = (e) => {
        if (e.keyCode === 13) {
            this.props.onPressEnter(this.state.text);
        }
    };

    render() {
        const { text } = this.state;
        return (
            <div style={styles.autocompleteContainerStyles}>
                <Field
                    label={this.props.placeholder}
                    onKeyDown={this.onPressEnter}
                    onFocus={this.props.onFocus}
                    name={this.props.fieldName}
                    formValue={text}
                    onChange={this.onTextChanged}
                    component={RenderAutocompleteField}
                    type="text"
                />
                <Suggestions
                    suggestions={this.state.suggestions}
                    suggestionSelected={this.suggestionSelected}
                    theme="default"
                />
            </div>
        );
    }
}

const styles = {
    autocompleteContainerStyles: {
        position: 'relative',
        display: 'inline',
        width: '100%'
    }
};

AutoComplete.propTypes = {
    items:  PropTypes.array.isRequired,
    placeholder: PropTypes.string.isRequired,
    onTextChanged: PropTypes.func.isRequired,
    fieldName: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onPressEnter: PropTypes.func.isRequired,
    onFocus: PropTypes.func
};

export default reduxForm({
    form: 'Autocomplete'
})(AutoComplete);

期待される結果:ユーザーがtextinputを使用して検索するたびに、提案の結果が得られるはずです。実際の結果:初めてのユーザーがtextinputを使用して検索すると、データは取得されません。初めてのデータがそこにある後でのみ

スマッシュポテト

フィルタリングはで行われるため、ハードコーディングされている場合は機能しますが、APIを使用している場合は機能しませんonTextChangedハードコーディングされAutoCompleteている場合、最初にonTextChangedthis.props.items.sort().filter(...)が呼び出されたときに機能する値がありますが、APIを使用すると、APIがitems戻るまで、この関数が実行された後propは空になります。

APIからの結果を処理するには、小道具が変更されたときにフィルタリングを行う必要があります。反応ドキュメントは実際にはここで非常によく似たケースをカバーしています(最初の例は使用getDerivedStateFromPropsが不必要に複雑であることを示しているので2番目の例を参照してください)、重要な部分はPureComponent不必要な再レンダリングを回避するためにを使用し、レンダリングでフィルタリングを行うことです。あなたの場合:

render() {
  // Derive your filtered suggestions from your props in render - this way when your API updates your items prop, it will re-render with the new data
  const { text } = this.state;
  const regex = new RegExp(`^${text}`, 'i');
  suggestions = this.props.items.sort().filter((v) => regex.test(v));

  ...
  <Suggestions
    suggestions={suggestions}
    ...
  />
  ...
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

コンポーネントが初めて表示されるときにリッスンします

分類Dev

カスタムオートコンプリートコンポーネントのEmberCliが機能しない

分類Dev

Next.jsReactアプリがカスタムコンポーネントコンテンツを表示しない

分類Dev

Angularルーターがコンポーネント間を初めてナビゲートしない

分類Dev

Reactのアプリコンポーネントに検索コンポーネントが表示されない

分類Dev

エラーは、コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたが、カスタムコンポーネントをエクスポートしていないことを示していました(React)

分類Dev

小道具をそのコンポーネントに拡散しているにもかかわらず、マテリアルUIツールチップがカスタムコンポーネントに表示されない

分類Dev

カスタム区切り文字を使用したオートコンプリート検索ビュー

分類Dev

初めてFirebaseに移動したとき、または戻ってきたときに、コンポーネントがFirebaseからデータをフェッチできない

分類Dev

角度のある子ルートが初めて以外にコンポーネントをレンダリングしないのはなぜですか?

分類Dev

コンポーネントを初めてロードするときにAngular4ngOnInitが機能しない

分類Dev

カスタムコンポーネントに対してBlazorFieldChangedイベントが発生しない

分類Dev

コンボボックスオートコンプリートを使用して検索すると、プログラムがクラッシュしました

分類Dev

オートコンプリートを使用して検索後にズーム

分類Dev

JQUERYのオートコンプリートに似たカスタムコンポーネント

分類Dev

検証が成功しない場合、カスタムコンポーネントは値を返しません

分類Dev

ajax を使用した hover イベントでブートストラップ ポップオーバーが初めて表示されない

分類Dev

関数を使用してコンポーネントを出力するときに、Reactトランジショングループが機能しない

分類Dev

TextBoxオートコンプリートリストが表示されていることを検出します

分類Dev

コンポーネントのループを出力し、1つのコンポーネントのみが更新されたときにループ全体が再レンダリングされないようにする

分類Dev

テンプレートを表示しない角度タイプスクリプトコンポーネント

分類Dev

コンポーネントが機能していないことを表示するためのBlazorrender-mode = "Server"

分類Dev

カスタムアコーディオンコンポーネントがボディ要素をレンダリングしない

分類Dev

テーマが変更されたときに「セカンダリ」を使用しているコンポーネントで色が変更されないvuetify

分類Dev

スタイル付きコンポーネントが別のスタイル付きコンポーネントをラップしていない

分類Dev

v-model値が変更されたときに、カスタムVue選択コンポーネントが選択されたオプションを更新しない

分類Dev

PrimeNGオートコンプリートコンポーネントを使用してフォーカスに関する提案を表示する

分類Dev

別のコンポーネントにラップされているときにルートに渡されたコンポーネントをレンダリングしないReactルーター

分類Dev

カスタムコンポーネントのAngularpreSelectedオプションが表示されない

Related 関連記事

  1. 1

    コンポーネントが初めて表示されるときにリッスンします

  2. 2

    カスタムオートコンプリートコンポーネントのEmberCliが機能しない

  3. 3

    Next.jsReactアプリがカスタムコンポーネントコンテンツを表示しない

  4. 4

    Angularルーターがコンポーネント間を初めてナビゲートしない

  5. 5

    Reactのアプリコンポーネントに検索コンポーネントが表示されない

  6. 6

    エラーは、コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたが、カスタムコンポーネントをエクスポートしていないことを示していました(React)

  7. 7

    小道具をそのコンポーネントに拡散しているにもかかわらず、マテリアルUIツールチップがカスタムコンポーネントに表示されない

  8. 8

    カスタム区切り文字を使用したオートコンプリート検索ビュー

  9. 9

    初めてFirebaseに移動したとき、または戻ってきたときに、コンポーネントがFirebaseからデータをフェッチできない

  10. 10

    角度のある子ルートが初めて以外にコンポーネントをレンダリングしないのはなぜですか?

  11. 11

    コンポーネントを初めてロードするときにAngular4ngOnInitが機能しない

  12. 12

    カスタムコンポーネントに対してBlazorFieldChangedイベントが発生しない

  13. 13

    コンボボックスオートコンプリートを使用して検索すると、プログラムがクラッシュしました

  14. 14

    オートコンプリートを使用して検索後にズーム

  15. 15

    JQUERYのオートコンプリートに似たカスタムコンポーネント

  16. 16

    検証が成功しない場合、カスタムコンポーネントは値を返しません

  17. 17

    ajax を使用した hover イベントでブートストラップ ポップオーバーが初めて表示されない

  18. 18

    関数を使用してコンポーネントを出力するときに、Reactトランジショングループが機能しない

  19. 19

    TextBoxオートコンプリートリストが表示されていることを検出します

  20. 20

    コンポーネントのループを出力し、1つのコンポーネントのみが更新されたときにループ全体が再レンダリングされないようにする

  21. 21

    テンプレートを表示しない角度タイプスクリプトコンポーネント

  22. 22

    コンポーネントが機能していないことを表示するためのBlazorrender-mode = "Server"

  23. 23

    カスタムアコーディオンコンポーネントがボディ要素をレンダリングしない

  24. 24

    テーマが変更されたときに「セカンダリ」を使用しているコンポーネントで色が変更されないvuetify

  25. 25

    スタイル付きコンポーネントが別のスタイル付きコンポーネントをラップしていない

  26. 26

    v-model値が変更されたときに、カスタムVue選択コンポーネントが選択されたオプションを更新しない

  27. 27

    PrimeNGオートコンプリートコンポーネントを使用してフォーカスに関する提案を表示する

  28. 28

    別のコンポーネントにラップされているときにルートに渡されたコンポーネントをレンダリングしないReactルーター

  29. 29

    カスタムコンポーネントのAngularpreSelectedオプションが表示されない

ホットタグ

アーカイブ