时间戳

首页 > 解决方案 > TypeError：无法读取 reactjs 组件中未定义的属性“setState”

javascript - TypeError：无法读取 reactjs 组件中未定义的属性“setState”

问题描述

我需要创建一种类型的级联接口，在该接口中选择第一个选项时，它必须有一个 rest api 才能根据选择的第一个选项获得第二个选项

为此我选择了 antd cascader： https ://ant.design/components/cascader/

但是我收到以下错误：

(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>
        );
  }
}

标签： javascriptreactjsantd

解决方案

你的函数不绑定到你的类。您有 2 个解决方案：

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

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稍后您可能会遇到同样的问题

推荐阅读