MUI自动完成和反应钩子窗体未显示所选选项和获取的数据

Question

我在react hook表单的表单中有一个MUI自动完成，它在填充表单时可以正常工作，但是当我想显示填充了提取数据的表单时，MUI自动完成仅在两次渲染后显示所选选项。

我认为这是使用效果和重置（从反应钩子形式）的东西，因为自动完成其选项是静态的工作正常，但我也必须从我的API获取选项的那些只有在第二次使用效果运行后才能正常工作。

我无法复制codesandbox，因为它是一个使用真实api的大型项目，但如果需要，我可以提供更多信息。如果有人能帮我，请提前感谢。

选择要在表单中可视化的项目的页面：

const People: React.FC = () => {

  const [show, setShow] = useState(false);
  const [modalData, setModalData] = useState<PeopleProps>({} as PeopleProps);

  async function showCustomer(id: string) {
    await api
      .get(`people/${id}`)
      .then((response) => {
        setModalData(response.data);
        setShow(true);
      })
      .catch((error) => toast.error('Error')
      )
  }

  return (
    <>
      {...} // there's a table here with items that onClick will fire showCustomer() 

      <Modal
        data={modalData}
        visible={show}
      />
    </>
  );
};

模态中的我的表单：

const Modal: React.FC<ModalProps> = ({data, visible}) => {
  const [situations, setSituations] = useState<Options[]>([]);
  const methods = useForm<PeopleProps>({defaultValues: data});
  const {reset} = methods;

  /* FETCH POSSIBLE SITUATIONS FROM API*/
  useEffect(() => {
    api
      .get('situations')
      .then((situation) => setSituations(situation.data.data))
      .catch((error) => toast.error('Error'));
  }, [visible]);
  /* RESET FORM TO POPULATE WITH FETCHED DATA */
  useEffect(() => reset(data), [visible]);

  return (
    <Dialog open={visible}>
      <FormProvider {...methods}>
        <DialogContent>
          <ComboBox
            name="situation_id"
            label="Situação"
            options={situations.map((item) => ({
              id: item.id,
              text: item.description
            }))}
          />
        </DialogContent>
      </FormProvider>
    </Dialog>
  );
};
export default Modal;

组合框组件：

const ComboBox: React.FC<ComboProps> = ({name, options, ...props}) => {
  const {control, getValues} = useFormContext();

  return (
    <Controller
      name={`${name}`}
      control={control}
      render={(props) => (
        <Autocomplete
          {...props}
          options={options}
          getOptionLabel={(option) => option.text}
          getOptionSelected={(option, value) => option.id === value.id}
          defaultValue={options.find(
            (item) => item.id === getValues(`${name}`)
          )}
          renderInput={(params) => (
            <TextField
              variant="outlined"
              {...props}
              {...params}
            />
          )}
          onChange={(event, data) => {
            props.field.onChange(data?.id);
          }}
        />
      )}
    />
  );
};

export default ComboBox;

Answer 1

我认为你在这里简化了一些事情：

• 呈现

我制作了一个小的代码沙盒，试图复制您的用例，看看：

另一个重要的事情：只有当您有深度嵌套的控件时，您才应该使用useFormContext，否则只需将控件传递给您的

React钩子窗体的FormProvider是基于React的上下文API构建的。它解决了数据通过组件树传递的问题，而无需在每个级别手动传递道具。这还会导致组件树在React钩子窗体触发状态更新时触发重新渲染