React中给函数传函数作为参数触发Invalid hook call如何解决

问题解答 #

React中完全支持将函数作为参数传递给其他函数，你遇到的报错和函数传参本身无关，是组件的定义、调用逻辑错误导致的，修复方案如下：

错误原因梳理

• 你定义的LazyOptions是React函数组件，不是普通工具函数，不能直接以LazyOptions(onChange)的形式执行。这种脱离React渲染上下文的调用方式，会触发Hook调用规则校验，导致报错（你用到的Cascader组件内部使用了Hook，直接执行函数相当于在组件外部触发了Hook调用）。
• 你当前的LazyOptions内部直接引用了options、loadData、onChange三个未声明的变量，存在作用域问题，无法正常拿到外部传入的参数。
• 你定义的onChange中使用了this.setState，如果是在类组件中定义，需要确保this指向正确。

修复步骤

1. 改造LazyOptions组件，明确从props中接收所需参数：

const LazyOptions = ({ options, loadData, onChange }) => {
  return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};

2. 按照React组件的标准方式调用LazyOptions，通过props传入所有参数，不要直接执行函数。如果你是在类组件中使用，参考写法如下：

class YourOuterComponent extends React.Component {
  // 类属性箭头函数写法，保证this指向当前组件实例
  onChange = (value, selectedOptions) => {
    const unique = value.filter(onlyUnique);
    this.setState({
      formValues: {
        province: unique.toString()
      }
    });
  };

  render() {
    return (
      {/* 其他渲染内容 */}
      <LazyOptions 
        options={你的options数据源}
        loadData={你的loadData逻辑函数}
        onChange={this.onChange}
      />
    )
  }
}

内容的提问来源于stack exchange，提问作者Dolphin