Question

我需要创建一种级联界面，在该级联界面中，选择第一个选项时，必须具有一个REST API才能获得第二个选项，具体取决于选择的第一个选项

为此，我选择了antd级联器： 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>
        );
  }
}

Answer 1

您的函数未绑定到您的课程。您有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函数

Answer 2

将您的函数转换为es6箭头函数，然后它应该可以工作

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

Answer 3

问题在您的代码中看起来是您尚未将此作用域绑定到您的函数。您可以将其绑定到构造器中，如下所示，在构造器内部-

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

或将ES6格式用于以下功能-

loadData =（selectedOptions）=> { }

TypeError：无法读取reactjs组件中未定义的属性'setState'

3 个答案: