Javascript 无法读取属性'；道具'；形式上未定义的

我有以下反应组件，但我无法找到上述错误的原因，感谢帮助

import React, { Component } from 'react';
import { Input} from 'antd';
import Form from '../../components/uielements/form';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
import { adalApiFetch } from '../../adalConfig';


const FormItem = Form.Item;

class CreateSiteCollectionForm extends Component {
    constructor(props) {
        super(props);
        this.state = {Alias:'',DisplayName:'', Description:''};
        this.handleChangeAlias = this.handleChangeAlias.bind(this);
        this.handleChangeDisplayName = this.handleChangeDisplayName.bind(this);
        this.handleChangeDescription = this.handleChangeDescription.bind(this);

    };

    handleChangeAlias(event){
        this.setState({Alias: event.target.value});
    }

    handleChangeDisplayName(event){
        this.setState({DisplayName: event.target.value});
    }

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

    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                let data = new FormData();
                //Append files to form data
                data.append(JSON.stringify({"Alias": this.state.Alias,
                 "DisplayName": this.state.DisplayName, 
                 "Description": this.state.Description
                }));

                const options = {
                  method: 'post',
                  body: data,
                  config: {
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                  }
                };

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

    render() {
        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 (
            <Form onSubmit={this.handleSubmit}>
                <FormItem {...formItemLayout} label="Alias" hasFeedback>
                {getFieldDecorator('Alias', {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your alias',
                        }
                    ]
                })(<Input name="alias" id="alias" onChange={this.handleChangeAlias} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="Display Name" hasFeedback>
                {getFieldDecorator('displayname', {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your display name',
                        }
                    ]
                })(<Input name="displayname" id="displayname" onChange={this.handleChangedisplayname} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="Description" hasFeedback>
                {getFieldDecorator('description', {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your description',
                        }
                    ],
                })(<Input name="description" id="description"  onChange={this.handleChangeDescription} />)}
                </FormItem>

                <FormItem {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        Create modern site
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedCreateSiteCollectionForm = Form.create()(CreateSiteCollectionForm);
export default WrappedCreateSiteCollectionForm;

import React，{Component}来自'React'；
从“antd”导入{Input}；
从“../../components/uielements/Form”导入表单；
从“../../components/uielements/Button”导入按钮；
从“../../components/Notification”导入通知；
从“../../adalConfig”导入{adalApiFetch}；
const FormItem=表单项；
类CreateSiteCollectionForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={Alias:''，DisplayName:''，Description:''}；
this.handleChangeAlias=this.handleChangeAlias.bind（this）；
this.handleChangeDisplayName=this.handleChangeDisplayName.bind（this）；
this.handlechangescription=this.handlechangescription.bind（this）；
};
handleChangeAlias（事件）{
this.setState（{Alias:event.target.value}）；
}
handleChangeDisplayName（事件）{
this.setState（{DisplayName:event.target.value}）；
}
handleChangeDescription（事件）{
this.setState（{Description:event.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.form.validateFieldsAndScroll（（错误，值）=>{
如果（！err）{
let data=new FormData（）；
//将文件附加到表单数据
data.append（JSON.stringify（{“Alias”）：this.state.Alias，
“DisplayName”：this.state.DisplayName，
“描述”：this.state.Description
}));
常量选项={
方法：“post”，
正文：数据，
配置：{
标题：{
“内容类型”：“多部分/表单数据”
}
}
};
adalApiFetch（获取“/sitecolections”，选项）
。然后（响应=>{
如果（response.status==204）{
通知(
“成功”，
“已创建网站集”，
''
);
}否则{
抛出“错误”；
}
})
.catch（错误=>{
通知(
“错误”，
“未创建网站集”，
错误
);
控制台错误（error）；
});
}
});      
}
render（）{
const{getFieldDecorator}=this.props.form；
常量formItemLayout={
labelCol：{
xs:{span:24}，
sm:{span:6}，
},
包装纸：{
xs:{span:24}，
sm:{span:14}，
},
};
常量tailFormItemLayout={
包装纸：{
xs:{
跨度：24，
偏移量：0，
},
sm:{
跨度：14，
抵销：6，
},
},
};
返回(
{getFieldDecorator（'别名'{
规则：[
{
要求：正确，
消息：“请输入您的别名”，
}
]
})()}
{getFieldDecorator（'displayname'{
规则：[
{
要求：正确，
消息：“请输入您的显示名称”，
}
]
})()}
{getFieldDecorator（'description'{
规则：[
{
要求：正确，
消息：“请输入您的描述”，
}
],
})()}
创建现代网站
);
}
}
const WrappedCreateSiteCollectionForm=Form.create（）（CreateSiteCollectionForm）；
导出默认WrappedCreateSiteCollectionForm；

您需要将

绑定到
handleSubmit
到
此

this.handleSubmit=this.handleSubmit.bind（this）
在构造函数中

this.handleSubmit=this.handleSubmit.bind（this）
在构造函数中

 constructor(props) {
        super(props);
        this.state = {Alias:'',DisplayName:'', Description:''};
        this.handleChangeAlias = this.handleChangeAlias.bind(this);
        this.handleChangeDisplayName = this.handleChangeDisplayName.bind(this);
        this.handleChangeDescription = this.handleChangeDescription.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this); // Bind it
    };

在构造函数中绑定handleSubmit，如下所示

 constructor(props) {
        super(props);
        this.state = {Alias:'',DisplayName:'', Description:''};
        this.handleChangeAlias = this.handleChangeAlias.bind(this);
        this.handleChangeDisplayName = this.handleChangeDisplayName.bind(this);
        this.handleChangeDescription = this.handleChangeDescription.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this); // Bind it
    };

只需为处理程序使用箭头函数，就可以避免
这个
上下文问题

根据：

箭头函数表达式的语法比函数短
表达式，并且没有自己的this、arguments、super或
新目标

因此，在您的组件中：

<Form onSubmit={(e) => this.handleSubmit(e)}>
...
onChange={(e) => this.handleChangeAlias(e)}
...
onChange={(e) => this.handleChangedisplayname(e)}
...
onChange={(e) => this.handleChangeDescription(e)}

内联函数和箭头函数的问题

关于这个问题有很多文章，我不想在这里开始辩论，因为它已经辩论很久了

如果您在使用此解决方案重新渲染时遇到问题，但认为箭头函数更容易（写入、读取、理解、绑定等），那么请看一看，它以非常简单的方式解决了此问题

这些文章对于深入了解内联函数和箭头函数的功能以及在项目中使用或不使用它们的原因非常重要：







只需为处理程序使用箭头函数，就可以避免
这个
上下文问题

交流电