this.state.dataState 在 fetchAllData 中不存在。

您需要将 App 中的 this.state.dataState 传递给 FirstButton ，然后再传递给 fetchAllData 。完成所有操作后，您就可以使用它了

将需要与状态交互的函数放入 React.Component 中，如果需要使用 React.Component 外部的某些东西，则传递引用状态。在您的代码中，您可以将“fetchAllData”函数放入 React.Component 中，并将其作为 prop 传递给 FirstButton

示例：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';
import {
  setExpandedState,
  setGroupIds,
} from '@progress/kendo-react-data-tools';

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

const processWithGroups = (data, dataState) => {
  const newDataState = process(data, dataState);
  setGroupIds({
    data: newDataState.data,
    group: dataState.group,
  });
  return newDataState;
};

// pass the fetchAllData function as a prop
const FirstButton = ({fetchData}) => {
  return (
    <div>
      <button type="button" onClick={fetchData}>
        Fetch Products
      </button>
    </div>
  );
};

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


  dataStateChange = (event) => {
    const newDataState = processWithGroups(
      this.state.products, // use the none processed data
      event.dataState
    );
    this.setState({
      result: newDataState,
      dataState: event.dataState,
    });
  };

  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,
      });
    }
  };
  
  // you can put this function inside
  fetchAllData = () => {
    fetch(
      'https://otp.metroservices.io/otp/routers/default/index/routes/uscalacmtarail:801/stops'
    )
      .then((response) => response.json())
      .then((productsList) => {
        const newDataState = processWithGroups(
          productsList,
          this.state.dataState
        );
        this.setState({
          products: productsList, // update the data
          result: newDataState, // update the procesed data
        });
      });
  };

  // componentDidMount() {
  //   this.fetchAllData()
  // }

  render() {
    const newData = setExpandedState({
      data: this.state.result.data, // pass the proccessed data
      collapsedIds: this.state.collapsedState,
    });
    return (
      <div>
        <FirstButton fetchData={this.fetchAllData}/>
        
        <Grid
          style={{
            height: '520px',
          }}
          resizable={true}
          reorderable={true}
          filterable={true}
          sortable={true}
          groupable={true}
          data={newData}
          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" filter="numeric" />
        </Grid>
      </div>
    );
  }
}

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