redux-form - FieldArray 的每个元素中有 2 个字段，但 fields.get(index) 无法获取第二个字段

Question

我在 FieldArray 的每个元素中有 2 个字段，
但我使用 fields.get()，
它不返回第二个字段。

在AvailableShopSelectFields组件和isSelected功能中，我打印为...

console.log('isSelected', fields.get(fields.length - 1));
日志将仅显示 'isSelect { no: 1 }

（我预计它会记录 { no: 1, id: 'something that I selected' }

父子组件

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>
  );
};

如何获得第二个字段？

用户界面

Redux 状态（未更新）

标签： redux-form