Question

我有以下组件，但是我只是在render方法中遇到此错误，但是我不确定我缺少什么，该组件与另一个实际起作用的组件几乎相同

import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message, Input } from 'antd';

import Form from '../../components/uielements/form';
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';
import { adalApiFetch } from '../../adalConfig';


const FormItem = Form.Item;
export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {options:[], loading:false, selectedOptions:[], description:''};
        this.loadData = this.loadData.bind(this);
        this.enterLoading = this.enterLoading.bind(this);
        this.onChange = this.onChange.bind(this);
        this.handleChangeDescription= this.handleChangeDescription.bind(this);

    }

    handleChangeDescription(event){
        this.setState({description : event.target.value});
    }

    enterLoading (){
        this.setState({ loading: true });

        const options = {
            method: 'put',
            body: JSON.stringify(
              {
                  "SiteCollectionUrl": this.state.TestSiteCollectionUrl,
                  "PageName": this.state.selectedOptions, 
                  "Description": this.state.Description
              }),
              headers: {
                  'Content-Type': 'application/json; charset=utf-8'
              } 
          };

          adalApiFetch(fetch, "/Tenant", options)
            .then(response =>{
              if(response.status === 204){
                  Notification(
                      'success',
                      'Page tempate created',
                      ''
                      );
               }else{
                  throw "error";
               }
            })
            .catch(error => {
              Notification(
                  'error',
                  'Page template not created',
                  error
                  );
              console.error(error);
          });

    }

    componentDidMount() {
        adalApiFetch(fetch, "/SiteCollection", {})
          .then(response => response.json())
          .then(json => {
            console.log(json);
            const firstLevelOptions = json.map(post => ({
                value: post.Url,
                label: post.Title,
                isLeaf: false    
            }));

            this.setState({
                options: firstLevelOptions
            });
          });
    }

    onChange(value, selectedOptions) {
        console.log("value:", value, "selectedOptions", selectedOptions);
        this.setState({
            selectedOptions: selectedOptions
        });
    }

    loadData(selectedOptions){
        console.log("loaddata", selectedOptions);

        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;

        const options = {
            method: 'get',
              headers: {
                      'Content-Type': 'application/json; charset=utf-8'
              }                    
          };

        adalApiFetch(fetch, "/Page/"+encodeURIComponent(targetOption.value.replace("https://","")), options)
          .then(response => response.json())
          .then(json => {
            targetOption.loading = false;
            console.log(json);
            const secondLevelOptions = json.map(page => ({
                value: page.Id,
                label: page.Name,
                isLeaf: true    
            }));
            targetOption.children = secondLevelOptions;
            this.setState({
                options: [...this.state.options],
            });
            }
        );

    }

    render(){
        const { rowStyle, colStyle, gutter } = basicStyle;
        const TabPane = Tabs.TabPane;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
        };
        const tailFormItemLayout = {
        wrapperCol: {
            xs: {
            span: 24,
            offset: 0,
            },
            sm: {
            span: 14,
            offset: 6,
            },
        },
        };

        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
                    />

                <FormItem {...formItemLayout} label="Description " hasFeedback>
                {getFieldDecorator('Description', {
                    rules: [
                        {
                            required: true,
                            message: 'Please input the page template description',
                        }
                    ]
                })(<Input name="Description" id="Description" onChange={this.handleChangeDescription} />)}
                </FormItem>


                    <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
                            Click me!
                            </Button>


                </ContentHolder>
                </Box>
            </Col>
            </Row>
        </LayoutWrapper>
        </div>
        );
  }
}

Answer 1

this.props.form是由高阶函数Form.create()()

注入的道具

您需要为您的课程添加一个名称，而不是匿名名称，并用Form.create()()将其包装起来：

class MyClass extends React.Components {}

export default Form.create()(MyClass);

因此MyCLass内的this.props.form不是未定义的

请参阅https://ant.design/components/form/#Form.create(options)

作为建议，最好不要将服务器调用与您的UI混合在一起

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

1 个答案: