Uncaught TypeError:_this.props.onToggle不是函数
问题描述:
我的代码从第三方API中提取数据并将其放入数组中。然后它将显示为<Result />
组件的列表。我还想能够按一下该项目,并将它添加到<ChosenList />
Uncaught TypeError:_this.props.onToggle不是函数
_this.props.onToggle is not a function
...是我得到的错误。
var Search = React.createClass({
getInitialState: function() {
return {
isLoading: false,
chosenList: [],
dataL: []
}
},
handleToggle: function(id) {
console.log('toggled!');
},
handleAddChosen: function (name) {
this.setState({
chosenList: [
...this.state.chosenList,
{
id: uuid(),
name: name,
}
]
});
},
handleSearch: function(name) {
var that = this;
this.setState({
isLoading: true
});
var dataL = [];
SearchAPI.getSearch(name).then(function(searchL) {
that.setState({
name: name,
dataL: searchL,
isLoading: false,
chosenList: chosenList
});
},
function(errorMessage) {
alert(errorMessage);
that.setState({isLoading: false});
});
},
render: function() {
var {isLoading, name, dataL, results} = this.state;
function renderMessage() {
if(isLoading) {
return <h2>Searching...</h2>;
} else if (name) {
return <SearchResults name={name} dataL={dataL} />;
}
}
return (
<div className="row col-md-12">
<div className="col-md-8">
<Card
style={{
padding: '0'
}}>
<CardText
style={{
textAlign: "center",
width: '100%',
margin: '0 auto',
paddingTop: '15px',
paddingBottom: '30px'
}}>
<SearchForm onSearch={this.handleSearch} />
</CardText>
</Card>
<Card
style={{
backgroundColor: '#eee'
}}>
{renderMessage()}
</Card>
</div>
<div className="col-md-4">
<h2>Selected</h2>
<ChosenList chosenList={chosenList} onToggle={this.handleAddChosen} />
</div>
</div>
);
}
});
module.exports = Search;
我的搜索API(SearchAPI.jsx)
module.exports = {
getSearch: function(name) {
var requestUrl = `${URL}:${name}`;
var dataL = [];
var searchL = [];
return axios.get(requestUrl).then(function(res) {
dataL = [res.data.data];
// console.log('FROMapiPage-dataL: ' + dataL[0]);
for (var i = 0, len = dataL[0].length; i < len; i++) {
searchL.push(<result id={uuid()} name={dataL[0][i].name} />);
}
return searchL;
},
function(err) {
throw new Error(err.response.data);
});
}
}
var ChosenList = React.createClass({
handleAddChosen: function(){
},
render: function() {
var {chosenList} = this.props;
var renderChosen =() => {
return chosenList.map((chosen) => {
return (
<Result key={chosen.id} {...chosen} />
);
});
};
return (
<div>
{renderchosen()}
</div>
);
}
});
module.exports = chosenList;
Result.jsx
var React = require('react');
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
// TODO add uuid for mapping
var Result = React.createClass({
render: function() {
var {id, name} = this.props;
return (
<div className="row" onClick={() =>{
this.props.onToggle(id)
}}>
<Card
style={{
padding: '15px',
margin: '5px'
}}>
<h2>{name}</h2>
</Card>
</div>
);
}
});
module.exports = Result;
是任何人都能够帮助弄清楚这个错误?
答
您正在将onToggle的处理程序传递给您的ChosenList,但是您的ChosenList从未将它传递到它试图调用它的Result子项上。你需要它传递下去的处理器...
var ChosenList = React.createClass({
handleAddChosen: function(){
},
render: function() {
var {chosenList, onToggle} = this.props;
var renderChosen =() => {
return chosenList.map((chosen) => {
return (
<Result key={chosen.id} {...chosen} onToggle={onToggle} />
);
});
};
return (
<div>
{renderchosen()}
</div>
);
}
});
+0
不幸的是我仍然得到同样的错误 – mGarsteck
很明显'ChosenList'组件此错误的来源,并不止于此,即使你通过'this.handleAddChosen'作为价值'onToggle'支撑对这个组件,在任何地方都没有'handleAddChosen'声明。你传递'undefined',当然undefined不是函数。 –
我在编写我的代码时犯了一个错误。 handleAddChosen是正确的函数名称,而不是handleAddResult。 – mGarsteck
我没有看到'ChosenList'的代码 – rfornal