Record the problem of null after using React using connect and solve it

question

During the process of developing a project with React, I encountered a problem. After using connect to a low-order component to wrap it into a high-order component HOC, the parent component general ref calls the child component method, and the error is prompted as null.

The code is as follows:

// Subcomponents// Connect to higher-order components through connectexport default connect(
    mapStateToProps,
)(ComboSelectorForm);

// Parent componentconstructor(props: IComboSelectorListProps | Readonly<IComboSelectorListProps>) {
    super(props);
    // ...
     = ();
    // ...
}
// The component is mounted on formRef<ComboSelectorForm
    ref={}
    id={}
    onSaveSuccess={}
>
</ComboSelectorForm>
// Call child component method();

After the parent component calls the child component method, the following error is reported

TypeError: Cannot read properties of null (reading 'methodName')

Analysis

React's high-order component HOC can be understood as some packaging on low-order components.

If the HOC of high-order component HOC does not do some special processing, it cannot directly access the low-order component instance. If you want to access the low-order component instance through ref, when calling connect, you need to pass the parameter {forwardRef: true}.

The connect method has four parameters, the official document explains it as follows:

• mapStateToProps?: Function
• mapDispatchToProps?: Function | Object
• mergeProps?: Function
• options?: Object

The first three parameters will be explained without expanding them. The main fourth option parameter has the following properties:

{
  context?: Object,
  pure?: boolean,
  areStatesEqual?: Function,
  areOwnPropsEqual?: Function,
  areStatePropsEqual?: Function,
  areMergedPropsEqual?: Function,
  forwardRef?: boolean,
}

The last parameter forwardRef is our protagonist, and the official document explains it as follows:

If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

When the forwardRef parameter is set to true, the ref property of the wrapper component will actually return the wrapped component instance.

OS: Forgive me for my limited translation level. (>_<)

Final solution

Directly upload the code:

// Subcomponents// Connect to higher-order components through connectexport default connect(
    mapStateToProps,
    null,    // Add new parameters    null,    // Add new parameters    { forwardRef: true }    // Add new parameters)(ComboSelectorForm);

// Parent component, consistent with previous codeconstructor(props: IComboSelectorListProps | Readonly<IComboSelectorListProps>) {
    super(props);
    // ...
     = ();
    // ...
}
// The component is mounted on formRef<ComboSelectorForm
    ref={}
    id={}
    onSaveSuccess={}
>
</ComboSelectorForm>
// Call child component method();

After the above modification, the parent component can access the ref instance normally.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.