react hook not changing form values

Question

new to React and working on existing project. I want when Select Elment changed (onInstrumentSelected called correctly), fill other fields of form with its related values, but not working. I could get correct data (checked in console.log) but could not not refill form by related new data.

const { Option, OptGroup } = Select;
const SettingsViewComponent: React.FC<{ base_instruments: any }> = props => {
  
  let [settings, setSettings] = React.useState<ISettings>();
  const instSearch = props.base_instruments;
  let insId = 0;
  React.useEffect(() => {
    async function fetchsettings(ins) {
      getSettings(ins)
        .then(rsp => {
          setSettings(rsp.data);
        });
    }
    fetchsettings(insId)
  }, [insId]);
  const onInstrumentSelected = async (value, option) => {
    insId = option.value;
    const stt= await getSettings(option.value);
    if (stt!= null) {
      console.log(stt.data); //correct data here 
// not working part:
      settings = stt.data
      setSettings(stt.data);

    } else {
      message.error('error');
    }
  };
  return !settings ? (
    <div />
  ) : (
    <Form
      initialValues={settings}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}>
      <Form.Item label="instrument" name="instrumentId">
        <Select onSelect={(val, op) => onInstrumentSelected(val, op)}>
          {instOptions}
        </Select>
      </Form.Item>
      <Form.Item label="Field 1" name="field1" >
        <Input />
      </Form.Item>
      <Form.Item label="Field 2" name="field2" >
        <Input />
      </Form.Item>
      <Form.Item label="Field3" name="field3">
        <Input />
      </Form.Item>
    </Form>);};
export default SettingsViewComponent;

tried answer tried answer

don't mutate settings directly, Only use setSettings. const newSettings = stt.data setSettings(newSettings); OR just use setSettings(stt.data) — SlothOverlord, Oct 28 '21 at 06:50
Also, I think that "initialValues={settings}" will only set values when the component mounts. Changes to settings will not reflect on the form. You need to set "value" prop on Form.Item for each setting type — SlothOverlord, Oct 28 '21 at 07:03
@SlothOverlord Thanks. `const newSettings = stt.data setSettings(newSettings);` OR `setSettings(stt.data)` dose not works. about second comment: yes you are right and this is exactly the problem that changes to setting not reflecting on form. I can't get your solution please provide more info. — Bheid, Oct 28 '21 at 08:06

score 0 · Accepted Answer · answered Oct 28 '21 at 10:33

I found solution from ant.design and solved like below, the key changes was using setFieldsValue on form:

// some unchanged

  const [form] = Form.useForm();
  const onInstrumentSelected = async (value, option) => {
    const stt= await getSettings(option.value);
    if (stt!= null) {
      console.log(stt.data); //correct data here 
  settings = stt.data
  form.setFieldsValue({ field1: settings.field1});
  form.setFieldsValue({ field2: settings.field2});
  form.setFieldsValue({ field3: settings.field3});

    } else {
      message.error('error');
    }
  };
  return !settings ? (
    <div />
  ) : (
    <Form form={form}
// unchanged

react hook not changing form values

1 Answers1