2 поля в каждом элементе FieldArray, но fields.get (index) не может получить второе поле - PullRequest
Новая
       12

2 поля в каждом элементе FieldArray, но fields.get (index) не может получить второе поле

1 голос
/ 16 апреля 2020

У меня есть 2 поля в каждом элементе FieldArray,
, но я использую fields.get (),
, он не возвращает второе поле.

В AvailableShopSelectFields компоненте и * Функция 1006 *, я печатаю как ...

console.log ('isSelected', fields.get (fields.length - 1));
В журнале будет отображаться только 'isSelect { no: 1}

(я ожидал, что в журналах {no: 1, id: 'что-то, что я выбрал'}

родительский и дочерний компоненты 

let ParentComponent = props => {
  return (
      .
      .
    <FieldArray name="shopIds" component={AvailableShopSelectFields} />
      .
      .
  )
}



// Child component

const AvailableShopSelectFields = props => {
  const { fields } = props;

  const [isLastAvailableShopNotSelected, setIsLastAvailableShopNotSelected] = useState(true);

  const isSelected = (value) => {
    const shopId = fields.get(fields.length - 1).id;
    console.log('isSelected', shopId === value, shopId, value, fields.get(fields.length - 1));
    !shopId ?
      setIsLastAvailableShopNotSelected(true) :
      setIsLastAvailableShopNotSelected(false);
  };

  return (
    <>
      {fields.map((shopFields, idx) => (
          <Row key={idx}>
            <Col className="left-panel" span={2}>
              <Field name={`${shopFields}.no`} label="No." component={InputField} disabled />
            </Col>
            <Col className="center-panel" span={12}>
              <Field name={`${shopFields}.id`}
                     label="Shop Name"
                     component={AvailableShopSelectField}
                     validate={[VALIDATION.required]}
                     input={{onChange: isSelected}}
              />
            </Col>
            <Col className="right-panel">
              <Button style={{ borderRadius: '50%', height: 40, width: 40, padding: 0 }}
                      onClick={() => fields.remove(idx)}
                      type="reset"
              >
                -
              </Button>
            </Col>
          </Row>
        )
      )}
      <Row>
        <Col align="center" span={16}>
          <Button style={{ borderRadius: '50%', height: 40, width: 40, padding: 0 }}
                  type="reset"
                  onClick={() => fields.push({ no: fields.length + 1 })}
                  disabled={isLastAvailableShopNotSelected}
          >
            +
          </Button>
        </Col>
      </Row>
    </>
  );
};

AvailableShopSelectField. js

const AvailableShopSelectField = ({ input, label, meta }) => {
  const [availableShops, setAvailableShops] = useState([]);

  const { error, touched } = meta;
  const validate = {
    validateStatus: '',
    help: ''
  };

  if (touched && error) {
    validate.validateStatus = 'error';
    validate.help = error;
  }

  useEffect(() => {
    (async () => await fetchAvailableShops())()
  }, []);

  const fetchAvailableShops = async () => {
    const { data: { data } = {} } = (await API.getMemberCardAvailableShop());
    setAvailableShops(data.shops);
  };

  return (
    <FormItem
      {...validate}
      label={label}
    >
      <FormSelect
        {...input}
        onChange={value => input.onChange(value)}
        showSearch
        style={{ width: "100%" }}
        optionFilterProp="children"
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        {availableShops.map(shop => (
          <Option key={shop.id} value={shop.id}>{shop.name}</Option>
        ))}
      </FormSelect>
    </FormItem>
  );
};

Как получить второе поле?

UI

UI

Состояние Redux (не обновляется)

Redux State

...