Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[yoyo837]

Item.js:

@connect() // react-redux ConnectFunction
class Item extends Component { // Custom Component
  // ...
}

export default Item;

use:

<Form.Item label="开始日期">
  {form.getFieldDecorator('startDate', {
    rules: [
      {
        required: true,
        message: '请选择开始日期',
      },
    ],
  })(
    <Item // Custom Component
      {...some props}
    />
  )}
</Form.Item>

If the getFieldDecorator receives a @connect connected component, you will get the warning.

A temporary solution is:

Item.js

// ...
// export default Item;

// eslint-disable-next-line react/no-multi-comp
export default class ItemWrapper extends Component {
  render() {
    const {children, ...props} = this.props
    return <Item {...props}>{children}</Item>
  }
}

related: ant-design/ant-design/issues/11324

[deebov]

the same problem

[f97-2308]

Me too..!

[DemetriusHR]

In the doc of the Ant, is recommended use ForwardRef of the React.

Doc Ant: https://ant.design/components/form/#components-form-demo-customized-form-controls Example: https://codesandbox.io/s/antd-reproduction-template-q4bdi

[ddf2008]

https://codesandbox.io/s/antd-reproduction-template-q4bdi

Seems the example is not for connect component

[Liruimin2]

how to save

[webwyb]

尝试下： @connect(mapStateToProps, null, null, { forwardRef: true })

[TaurusWood]

@webwyb 为什么需要ref才不会报错啊，现在connect是函数组件了么？

[michaelckelly]

@connect(mapStateToProps, null, null, { forwardRef: true })

Thanks @webwyb , this worked for me if anyone is in a similar boat my code ended up as:

export default compose(
  Form.create({ name: 'formName' }),
  connect(mapStateToProps, { actionCreators }, null, { forwardRef: true })
)(ComponentName)