javascript - 如何使用 MUI 自动完成、react-hook-form 和自定义钩子构建异步自动完成组件（React 和 TS）

Question

我正在尝试使用 Material UI 自动完成组件、react-hook-form 和我的自定义挂钩构建一个通用的自动完成组件。

它应该做什么：在用户输入（每个字母之后）应该调用 api，自动完成中的选项列表应该相应更新。

我的问题是什么：子组件和父组件的许多重新渲染（当用户快速键入或删除时，很可能与重新渲染有关）。我认为应该有一种方法可以使用 react-hook-form 来避免这种行为，我正在尝试使用它，因为自动完成是表单字段。

有人能告诉我我的方法错了吗？我无法真正改变包含调用 api 的钩子。也许有人已经有类似的问题了？我尝试使用 react-hook-form 中的控制器包装 mui 自动完成功能，但并没有太大帮助。当用户输入他想要的内容并将其删除时，位置组件被重新渲染了 130 次。任何想法如何使这项工作？

它目前的样子：

表单组件（带有 RHF 提供程序的上下文）

import React from 'react';
import { useForm, FormProvider } from 'react-hook-form';

export default function UserForm(): JSX.Element {
  const methods = useForm();
  const handleSkip = (): void => {
    console.log('skipped');
  };

  const onSubmit = useCallback((rawFormData) => {
    console.log(rawFormData);
  }, []);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Location />
        <Actions>
          <SubmitButton isPending={false}>Submit</SubmitButton>
        </Actions>
      </Form>
    </FormProvider>
  );
}

地点：

import React, { useState } from 'react';
import { useFormContext } from 'react-hook-form';

export default function Location(): JSX.Element {
  const { register } = useFormContext();
  const [selectedCountry, setSelectedCountry] = useState(null);
  const [nameOfCountry, setNameOfCountry] = useState('');
  const { data: countries} = useAutocomplete(nameOfCountry);


  return (
    <div>
      <CustomAutocomplete
        autocompleteOptions={countries}
        name='country'
        onInputChange={setSelectedCountry}
        placeholder='country'
        registerInput={register()}
      />
    </div>
  );
}

自定义自动完成：

import React, { SetStateAction, Dispatch, Ref, useState, useEffect } from 'react';
import { TextField } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { useFormContext, Controller } from 'react-hook-form';

interface Properties {
  name: string;
  placeholder: string;
  autocompleteOptions: string[];
  onInputChange?: Dispatch<SetStateAction<string>>;
  onChange?: Dispatch<SetStateAction<string>>;
  isLoading?: boolean;
  registerInput: Ref<any>;
}

CustomAutocomplete.defaultProps = {
  isLoading: false,
  onChange: (value: Record<string, never>) => value,
  onInputChange: (value: string) => value,
};

export default function CustomAutocomplete({
  name,
  placeholder,
  autocompleteOptions,
  onInputChange,
  isLoading,
  onChange,
  registerInput,
}: Properties): JSX.Element {
  const { errors } = useFormContext();
  const options = autocompleteOptions || [];

  return (
    <div>
      <Autocomplete
        freeSolo
        getOptionLabel={(option: Country | string) => option.name || option}
        id="input-autocomplete"
        onInputChange={(event, value) => {
          onInputChange(value);
        }}
        openOnFocus={false}
        // onChange={(event, value) => onChange && onChange(value) }
        options={options}
        renderInput={(parameters) => (
          <TextField
            {...parameters}
            error={Boolean(errors && errors[name])}
            helperText={errors && errors[name]?.message}
            id={name}
            inputRef={registerInput}
            name={name}
            placeholder={placeholder}
            rowsMax="1"
          />
        )}
      />
    </div>
  );
}

使用自动完成钩子：

包含对 api 的调用返回对象，例如：

{
//array of resuls
data: [],
isLoading: boolean
}

标签： javascriptreactjstypescriptmaterial-uireact-hook-form