javascript Reactjs：未捕获的类型错误：未定义不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24194738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reactjs: Uncaught TypeError: undefined is not a function
提问by sAm
I am a newbie in the Reactjs, I am trying to perform CRUD operation. But I am having issues when performing Delete event. This is How my screen looks: ![enter image description here][1]
我是 Reactjs 的新手，我正在尝试执行 CRUD 操作。但是我在执行删除事件时遇到问题。这是我的屏幕外观：![在此处输入图像描述][1]
And my code looks like this:
我的代码如下所示：
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>
);
}
});
I know I am doing some stupid mistake but I don't find help to solve this. Please help me to sort it out.
我知道我犯了一些愚蠢的错误，但我找不到帮助来解决这个问题。请帮我整理一下。
Thank you in advance.
先感谢您。
回答by Brigand
You create your Organization elements like this:
您可以像这样创建组织元素：
<Organization id={organization.id}
name={organization.name}
description={organization.description}></Organization>
So inside Organization you will have three props: id, name, and description. You try to call this.props.DeleteOrganization()from inside Organization, which is undefined because it's not one of the three props you're passing to it.
因此，在 Organization 内部，您将拥有三个道具：id、name 和 description。您尝试this.props.DeleteOrganization()从 Organization 内部调用，这是未定义的，因为它不是您传递给它的三个 props 之一。
To make it work with OrganizationList, you need to pass the delete function down to it:
要使其与 OrganizationList 一起使用，您需要将删除函数传递给它：
<OrganizationList data={this.state.data} onDelete={this.DeleteOrganizationFromServer} />
And inside OrganizationList's render function, you can pass it down again.
在 OrganizationList 的渲染函数中，您可以再次将其向下传递。
<Organization id={organization.id}
name={organization.name}
description={organization.description}
onDelete={this.props.onDelete.bind(null, organization.id}></Organization>
And inside Organization:
内部组织：
handleDeleteClick: function(){
this.props.onDelete()
}
回答by sAm
I have managed to the solve problem myslef but this fiddle helped me greatly: http://jsfiddle.net/ammit/wBYHY/5/
我已经设法解决了 myslef 问题，但是这个小提琴对我帮助很大：http: //jsfiddle.net/ammit/wBYHY/5/
So mainly I added one more function in OrganizationList that calls DeleteOrganizationFromServer function, so now my code looks like this:
所以主要是我在 OrganizationList 中添加了一个调用 DeleteOrganizationFromServer 函数的函数，所以现在我的代码如下所示：
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);
},
});
