React函数组件转类组件时setResultState未定义如何解决

问题说明 #

你之前基于React函数式组件+Hooks实现了带数据拉取、分组折叠能力的Grid列表，重写为Class组件后触发ReferenceError: setResultState is not defined报错，本质是Hooks逻辑和Class组件的状态管理机制不兼容导致的。

核心错误点 #

• setResultState、setProducts是函数组件中useState返回的专属状态更新方法，Class组件中不存在这些全局方法，所有状态更新必须通过Class实例的this.setState方法执行
• 类外定义的onExpandChange、onDataStateChange使用了useMemo等Hooks语法，不能直接在Class组件中作为事件回调使用
• 原始state定义中未声明products字段，数据拉取后无法正确存储源数据

修正后完整代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, Column, process, setGroupIds, setExpandedState } from '@progress/kendo-react-grid';

const initialDataState = {
  take: 10,
  skip: 0,
  group: [
    {
      field: 'id',
    },
  ],
};

// 调整为纯工具方法，不依赖Hooks
const processWithGroups = (data, dataState) => {
  const newDataState = process(data, dataState);
  setGroupIds({
    data: newDataState.data,
    group: dataState.group,
  });
  return newDataState;
};

class App extends React.PureComponent {
  state = {
    dataState: initialDataState,
    products: [],
    result: processWithGroups([], initialDataState),
    collapsedState: [],
    resultState: processWithGroups([], initialDataState),
  };

  // 替换原Hooks版本的onDataStateChange
  dataStateChange = (event) => {
    const newDataState = processWithGroups(
      this.state.products,
      event.dataState
    );
    this.setState({
      result: newDataState,
      dataState: event.dataState,
      resultState: newDataState
    });
  };

  componentDidMount() {
    fetch(
      'https://otp.metroservices.io/otp/routers/default/index/routes/uscalacmtarail:801/stops'
    )
      .then((response) => response.json())
      .then((json) => {
        const newDataState = processWithGroups(json, this.state.dataState);
        // 替换Hooks的setResultState、setProducts，统一用this.setState更新
        this.setState({
          products: json,
          result: newDataState,
          resultState: newDataState
        });
      });
  }

  // 替换原Hooks版本的onExpandChange
  expandChange = (event) => {
    const item = event.dataItem;
    if (item.groupId) {
      const newCollapsedIds = !event.value
        ? [...this.state.collapsedState, item.groupId]
        : this.state.collapsedState.filter(
            (groupId) => groupId !== item.groupId
          );
      this.setState({
        collapsedState: newCollapsedIds,
      });
    }
    // 折叠状态变更后同步更新数据状态
    const newDataState = processWithGroups(this.state.products, this.state.dataState);
    this.setState({
      result: newDataState,
      resultState: newDataState
    });
  };

  render() {
    const newData = setExpandedState({
      data: this.state.result.data,
      collapsedIds: this.state.collapsedState,
    });
    return (
      <Grid
        style={{
          height: '520px',
        }}
        pageable={{
          pageSizes: true,
        }}
        groupable={true}
        data={newData}
        total={this.state.resultState.total}
        onDataStateChange={this.dataStateChange}
        {...this.state.dataState}
        onExpandChange={this.expandChange}
        expandField="expanded"
      >
        <Column field="id" filterable={false} title="ID" width="50px" />
        <Column field="name" title="Name" />
        <Column field="cluster" title="Cluster" />
      </Grid>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('my-app'));

关键适配点说明 #

• 所有原Hooks的状态更新逻辑全部替换为this.setState操作，把products、resultState等需要响应式更新的变量统一放到Class组件的state中管理
• 移除了类外依赖Hooks的回调函数，改为Class实例的箭头方法，避免this指向问题同时满足事件回调要求
• 折叠状态和数据状态变更后都同步调用processWithGroups重新计算Grid需要的渲染数据，保证展示和状态一致

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