我的代碼從第三方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;
是任何人都能夠幫助弄清楚這個錯誤?
很明顯'ChosenList'組件此錯誤的來源,並不止於此,即使你通過'this.handleAddChosen'作爲價值'onToggle'支撐對這個組件,在任何地方都沒有'handleAddChosen'聲明。你傳遞'undefined',當然undefined不是函數。 –
我在編寫我的代碼時犯了一個錯誤。 handleAddChosen是正確的函數名稱,而不是handleAddResult。 – mGarsteck
我沒有看到'ChosenList'的代碼 – rfornal