antd useForm hook does not work

[An0nymous0]

f12 finds no request bound useOne hooks,No content in queryResult

export const UserEdit: React.FC<IResourceComponentsProps> = ({...props}) => {
  const { id,setId,form, formProps, saveButtonProps, onFinish,queryResult } = useForm({
    action: "edit",
    dataProviderName: "usercenter",
    resource: `user`,
    // id:props.params.id
  });
  return (
        <Edit
            saveButtonProps={saveButtonProps}
            resource={`user`}
            dataProviderName={"usercenter"}
            recordItemId={id}
        >
          <Form form={form} {...formProps} layout="vertical" >
            <Form.Item rules={[
              {
                required: true,
              },
            ]}
                       label="nickname" name="nickname">
              <Input/>
            </Form.Item>
            <Form.Item label="username" name="username">
              <Input disabled/>
            </Form.Item>
            <Form.Item label="mobile" name="mobile">
              <Input disabled/>
            </Form.Item>
          </Form>
        </Edit>
  );
};

[salihozdemir]

If you use useForm with "edit" or "clone" mode, the id is required. By default, useForm infers the id from the URL. If the URL doesn't contain the id params, you must provide it manually.

You can define the id in the useForm options:

const formResult = useForm({
    resource: "users",
    id: "123456",
});

You can find more information about the id: https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#id

Also, you can use the setId method to set the id after the form is mounted:

const formResult = useForm({
    resource: "users",
});

formResult.setId("123456");

You can find more information about the setId: https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#setid

[An0nymous0]

const {id,form, formProps, saveButtonProps, onFinish, queryResult} = useForm({
        action: "edit",
        dataProviderName: "usercenter",
        resource: `user`,
        redirect:"list",
    });
    console.log(id)

I had a look at part of the source code and I'm sure it got the id on its own

[salihozdemir]

const {id,form, formProps, saveButtonProps, onFinish, queryResult} = useForm({
        action: "edit",
        dataProviderName: "usercenter",
        resource: `user`,
        redirect:"list",
    });
    console.log(id)

I had a look at part of the source code and I'm sure it got the id on its own

As I said, by default it reads id from URL. In your case, localhost:3000/users/edit/1 will be read as id: 1, resource: users, and action: edit. You can change(override) this by passing id, resource, and action props to the useForm hook.

[salihozdemir]

Hey @An0nymous0,

Btw, I realized you're using the custom resource different from in resources passed to <Refine> component. Your resource definition's name is users but you're using user in your useForm hook. In such case, useForm cannot infer the id, resource, and action from the URL. You need to pass them explicitly to useForm for custom resources usages.

useForm({
  resource: "user",
  id: id,
  action: "edit",
});

For the parse the URL params, you can use useParams hook from react-router-dom(if you're using react-router). Or you can use useParsed hook from @refinedev/core to parse the URL params.

[An0nymous0]

Ok, I understand thanks.