React中能否向公共函数传入组件实例调用setState？正确实现方式是什么？

核心问题说明 #

1. 语法层面错误：你直接将函数参数命名为this，属于JavaScript关键字占用，会直接触发语法报错，这是代码无法运行的直接原因。
2. 设计层面问题：公共组件直接依赖父组件实例的setState方法，会导致组件与父组件强耦合，仅支持类组件使用，完全丧失公共组件的通用性，也违反React单向数据流的设计原则。

推荐实现方案（高复用低耦合） #

不要在公共组件内操作父组件状态，改为通过回调参数将选中值抛给父组件，由父组件自行管理自身状态，该方案同时支持类组件和函数组件调用。

改造后的公共组件代码 #

import React from 'react';
// 注意regionDict、onlyUnique、Cascader需要提前在当前文件引入或定义
export const LazyRegionCascader = (props) => {
  const { onChange: onParentChange } = props;
  const optionLists = regionDict.REGION.map(item => ({
    value: item,
    label: item,
    isLeaf: false,
  }));
  const [options, setOptions] = React.useState(optionLists);

  const onChange = (value, selectedOptions) => {
    const unique = value.filter(onlyUnique);
    // 仅抛出处理后的结果，不操作父组件状态
    onParentChange?.(unique.toString());
  };

  const loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    // 懒加载子级城市
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = regionDict.CITY[`${targetOption.label}`].map(itemc => ({
        label: itemc,
        value: itemc,
      }));
      setOptions([...options]);
    }, 100);
  };

  return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect style={{ width: 120 }}/>;
};

父组件调用示例 #

类组件调用

class YourPage extends React.Component {
  state = {
    formValues: {
      province: ''
    }
  }
  render() {
    return (
      <div>
        <LazyRegionCascader 
          onChange={(province) => {
            this.setState(prev => ({
              formValues: {
                ...prev.formValues,
                province
              }
            }))
          }}
        />
      </div>
    )
  }
}

函数组件调用

const YourPage = () => {
  const [formValues, setFormValues] = React.useState({
    province: ''
  })
  return (
    <div>
      <LazyRegionCascader 
        onChange={(province) => {
          setFormValues(prev => ({
            ...prev,
            province
          }))
        }}
      />
    </div>
  )
}

不推荐的兼容方案（仅作参考） #

如果你暂时需要快速兼容原有逻辑，可以修改参数名避开关键字限制，直接传入组件实例，但是该方案仅支持类组件，复用性、可维护性极差：

// 修改公共函数参数名，不使用this关键字
export const LazyOptions = (componentInstance) => {
  const optionLists =regionDict.REGION.map(function(item){
    return ({
      value: item,
      label: item,
      isLeaf: false,
    });
  });
  const [options, setOptions] = React.useState(optionLists);
  const onChange = (value, selectedOptions) => {
    var unique = value.filter(onlyUnique);
    // 调用传入的实例的setState
    componentInstance.setState({
      formValues:{
        province: unique.toString()
      }
    });
  };
  // 剩余loadData、返回组件逻辑与原代码一致
}

调用方式：

LazyOptions(this)

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