Javascript TypeError:无法读取属性'；设置状态'；reactjs组件中未定义的

我需要创建一种级联接口，在其中选择第一个选项时，它必须使用RESTAPI才能获得第二个选项，具体取决于选择的第一个选项

为此，我选择了antd级联器：

但是，我得到以下错误：

(anonymous function)
src/containers/ExtractPageTemplate/index.js:46
  43 |     label: `${targetOption.label} Dynamic 2`,
  44 |     value: 'dynamic2',
  45 |   }];
> 46 |   this.setState({
  47 |     options: [...this.state.options],
  48 |   });
  49 | }, 1000);

我的代码如下：

import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { Cascader } from 'antd';

const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  }];

export default class extends Component {

    constructor(props) {
        super(props);
        this.state = {options};
    }

    onChange(value, selectedOptions) {
        console.log(value, selectedOptions);
    }

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

        // load options lazily
        setTimeout(() => {
          targetOption.loading = false;
          targetOption.children = [{
            label: `${targetOption.label} Dynamic 1`,
            value: 'dynamic1',
          }, {
            label: `${targetOption.label} Dynamic 2`,
            value: 'dynamic2',
          }];
          this.setState({
            options: [...this.state.options],
          });
        }, 1000);
      }


    render(){
        const { rowStyle, colStyle, gutter } = basicStyle;
        const TabPane = Tabs.TabPane;

        return (
        <div>
            <LayoutWrapper>
            <PageHeader>{<IntlMessages id="pageTitles.PageAdministration" />}</PageHeader>
            <Row style={rowStyle} gutter={gutter} justify="start">
            <Col md={12} sm={12} xs={24} style={colStyle}>
                <Box
                title={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
                subtitle={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
                >
                <ContentHolder>
                    <Cascader
                                options={this.state.options}
                                loadData={this.loadData}
                                onChange={this.onChange}
                                changeOnSelect
                    />
                </ContentHolder>
                </Box>
            </Col>
            </Row>
        </LayoutWrapper>
        </div>
        );
  }
}

import React，{Component}来自'React'；
从“antd”导入{行、列、选项卡、菜单、下拉列表、按钮、图标、消息}；
从“../../components/utility/PageHeader”导入PageHeader；
从“../../components/utility/Box”导入框；
从“../../components/utility/LayoutWrapper”导入LayoutWrapper；
从“../../components/utility/ContentHolder”导入ContentHolder；
从“../../settings/basicStyle”导入basicStyle；
从“../../components/utility/IntlMessages”导入IntlMessages；
从“antd”导入{Cascader}；
常量选项=[{
价值:'浙江',，
标签:"浙江",，
岛：错，
}, {
价值:'江苏',，
标签:"江苏",，
岛：错，
}];
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.state={options}；
}
一旦更改（值，选择选项）{
console.log（值，所选选项）；
}
加载数据（选择选项）{
const targetOption=selectedOptions[selectedOptions.length-1]；
targetOption.loading=true；
//懒散地加载选项
设置超时（（）=>{
targetOption.loading=false；
targetOption.children=[{
标签：`${targetOption.label}动态1`，
值：“dynamic1”，
}, {
标签：`${targetOption.label}动态2`，
值：“dynamic2”，
}];
这是我的国家({
选项：[…this.state.options]，
});
}, 1000);
}
render（）{
const{rowStyle，colStyle，gutter}=basicStyle；
const TabPane=Tabs.TabPane；
返回(
{}
);
}
}

将您的函数转换为es6 arrow函数，然后它就可以工作了

loadData = (selectedOptions)=>{
     //YOUR CODE HERE
 }

---

将您的函数转换为es6 arrow函数，然后它就可以工作了

loadData = (selectedOptions)=>{
     //YOUR CODE HERE
 }

---

函数未绑定到类。 您有两种解决方案：

将其转换为箭头函数，以便上下文自动绑定到类：

loadData = selectedOptions => {

或将其绑定：

constructor(props) {
    super(props);
    this.state = {options};
    this.loadData = this.loadData.bind(this)
}

您还可以在JSX中绑定它：

<Cascader
    options={this.state.options}
    loadData={this.loadData.bind(this)}
    onChange={this.onChange}
    changeOnSelect
/>

---

稍后使用

onChange

函数可能会遇到相同的问题您的函数未绑定到类。 您有两种解决方案：

将其转换为箭头函数，以便上下文自动绑定到类：

loadData = selectedOptions => {

或将其绑定：

constructor(props) {
    super(props);
    this.state = {options};
    this.loadData = this.loadData.bind(this)
}

您还可以在JSX中绑定它：

<Cascader
    options={this.state.options}
    loadData={this.loadData.bind(this)}
    onChange={this.onChange}
    changeOnSelect
/>

---

稍后，您可能会遇到同样的问题，即

onChange

函数

代码中的问题是您没有将此范围绑定到函数。您可以在构造函数中绑定它，如下所示-

this.loadData=this.loadData.bind（this）

或使用ES6格式实现以下功能-

loadData=（选择的选项）=>{

---

}

代码中的问题是您尚未将此范围绑定到函数。您可以在构造函数中绑定它，如下所示-

this.loadData=this.loadData.bind（this）

或使用ES6格式实现以下功能-

loadData=（选择的选项）=>{ }