反应：使用 antd 清除后，将 select 的值设置为 null

Question

I am using ant design on my application. There is form.

        useEffect(() => {
         ...props.client
        let client = {
            employeeId:props.client?.employee.id
        };

        form.setFieldsValue(client);
       }, [props.client])

On update form 'employeeId' field is not sending to backend, but i want to set its value to null. Does someone now best way of that?

    <Form.Item name="employeeId">
     <Select allowClear>
       {props.employees?.map((employee) => (
         <Option key={employee.id} value={employee.id}>{employee.name}</Option>
           ))}
            </Select>
            </Form.Item>

Answer 1

I think your useEffect maybe a little buggy . I don't know what the ...props.client is doing there.

It might help to destructure the client prop as it is used so many times. Putting a snippet below to see if it works for you.

const Component = (props) => {
  const { client, ...otherProps } = props;

  useEffect(() => {
    // if id is present, use it, else set null. 
    // Notice the use of ?? instead of || here. 
    // That is so that id with value 0 is not ignored as it is falsy in nature
    form.setFieldsValue({ employeeId: client?.employee?.id ?? null });
    }, [client]) 

}