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>
  );
}

CustomAutocomplete：

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>
  );
}

useAutocomplete钩子：

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

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

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

0 个答案: