Javascript Reactjs:Uncaught TypeError:undefined不是函数_Javascript_Reactjs_React Jsx

Javascript Reactjs:Uncaught TypeError:undefined不是函数

javascript reactjs

Javascript Reactjs:Uncaught TypeError:undefined不是函数,javascript,reactjs,react-jsx,Javascript,Reactjs,React Jsx,我是Reactjs的新手，我正在尝试执行CRUD操作。但我在执行删除事件时遇到问题。这是我的屏幕的外观： ![在此处输入图像描述][1] 我的代码如下所示： var DALHandler=React.createClass({ getInitialState:function(){ return{data: {objects:[]}} // variable should be created with array

我是Reactjs的新手，我正在尝试执行CRUD操作。但我在执行删除事件时遇到问题。这是我的屏幕的外观： ![在此处输入图像描述][1]

我的代码如下所示：

    var DALHandler=React.createClass({
            getInitialState:function(){
              return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) { // this is Json Function

                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },componentWillMount: function() {
                this.loadOrganizationFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList data= {this.state.data}  />
                    <Organization DeleteOrganization= {this.DeleteOrganizationFromServer} />


                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var organizations = parsed_results.map(function(organization){
                return <Organization  id={organization.id} name={organization.name} description={organization.description}> </Organization>
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    //var converter = new Showdown.converter();

    var Organization = React.createClass({
        handleDeleteClick: function (e) {
                //alert(this.props.id);
                 var currentId=this.props.id;
                 this.props.DeleteOrganization(); // ERROR CAUSES HERE:


            },

    render: function() {

        return (
            <div className="row">
            <div className="small-2 large-2 columns">{this.props.id} </div>
            <div className="small-4 large-4 columns">{this.props.name} </div>
            <div className="small-4 large-4 columns">{this.props.description}</div>
            <div className="small-2 large-2 columns"> 

            <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />  

            </div>


            </div>
            );
    }
});

var OrganizationHandler=React.createClass({
            getInitialState:function(){
                return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) {

                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.loadOrganizationFromServer();
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url',
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },
            componentWillMount: function() {
                this.loadOrganizationFromServer();

            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />

                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        internal_DeleteOrganization: function(id) {
            this.props.external_DeleteOrganization(id);
        },
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var that = this; // Not equally that to this was also causing error, 
            var organizations = parsed_results.map(function(organization){
                return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    var Organization = React.createClass({
        handleDeleteClick: function () {
                this.props.onDeleteOrganization(this.props.id);
            },

    });

var DALHandler=React.createClass({
getInitialState:函数（）{
返回{data:{objects:[]}}//应使用数组创建变量
},
DeleteOrganizationFromServer:function（id）{//这是Json函数
$.ajax({
标题：{'Accept'：'application/json'，
'内容类型'：'应用程序/json'}，
url:'url/'+id，
数据类型：“json”，
键入：“删除”，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（'url='url'，status，err.toString（））；
}.绑定（此）
});
},
loadOrganizationFromServer:函数（）{
$.ajax({
标题：{'Accept'：'application/json'，
'内容类型'：'应用程序/json'}，
url:'url/'+id，
数据类型：“json”，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（'url='url'，status，err.toString（））；
}.绑定（此）
});
}，componentWillMount:function（）{
此.loadOrganizationFromServer（）；
//setInterval（this.loadCommentsFromServer，this.props.pollInterval）；
}，render:function（）{
返回(
);
}
});
var OrganizationList=React.createClass({
render:function（）{
var结果=this.props.data；
var parsed_results=results.objects；
var organizations=parsed_results.map（函数（组织））{
回来
});
返回(
{组织}
)
}
});
//var converter=new shodown.converter（）；
var Organization=React.createClass({
handleDeleteClick:函数（e）{
//警报（this.props.id）；
var currentId=this.props.id；
this.props.DeleteOrganization（）；//此处的错误原因：
},
render:function（）{
返回(
{this.props.id}
{this.props.name}
{this.props.description}
);
}
});

我知道我犯了一些愚蠢的错误，但我没有找到帮助来解决这个问题。请帮我整理一下

提前感谢。

您创建的组织元素如下所示：

    var DALHandler=React.createClass({
            getInitialState:function(){
              return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) { // this is Json Function

                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },componentWillMount: function() {
                this.loadOrganizationFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList data= {this.state.data}  />
                    <Organization DeleteOrganization= {this.DeleteOrganizationFromServer} />


                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var organizations = parsed_results.map(function(organization){
                return <Organization  id={organization.id} name={organization.name} description={organization.description}> </Organization>
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    //var converter = new Showdown.converter();

    var Organization = React.createClass({
        handleDeleteClick: function (e) {
                //alert(this.props.id);
                 var currentId=this.props.id;
                 this.props.DeleteOrganization(); // ERROR CAUSES HERE:


            },

    render: function() {

        return (
            <div className="row">
            <div className="small-2 large-2 columns">{this.props.id} </div>
            <div className="small-4 large-4 columns">{this.props.name} </div>
            <div className="small-4 large-4 columns">{this.props.description}</div>
            <div className="small-2 large-2 columns"> 

            <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />  

            </div>


            </div>
            );
    }
});

var OrganizationHandler=React.createClass({
            getInitialState:function(){
                return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) {

                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.loadOrganizationFromServer();
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url',
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },
            componentWillMount: function() {
                this.loadOrganizationFromServer();

            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />

                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        internal_DeleteOrganization: function(id) {
            this.props.external_DeleteOrganization(id);
        },
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var that = this; // Not equally that to this was also causing error, 
            var organizations = parsed_results.map(function(organization){
                return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    var Organization = React.createClass({
        handleDeleteClick: function () {
                this.props.onDeleteOrganization(this.props.id);
            },

    });

所以在组织内部，您将拥有三个道具：id、名称和描述。您尝试从组织内部调用

this.props.DeleteOrganization（）

，该函数未定义，因为它不是您传递给它的三个支柱之一

要使其与OrganizationList一起工作，需要将delete函数向下传递给它：

在OrganizationList的渲染函数中，您可以再次向下传递它

以及组织内部：

handleDeleteClick:function（）{
this.props.onDelete（）
}