제 코드는 제 3 자 API에서 데이터를 가져 와서 배열에 넣습니다. 그런 다음 <Result />
구성 요소 목록으로 표시됩니다. ID가 항목을 클릭 할 수 좋아하고 그것이 <ChosenList />
잡히지 않은 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;
수있는 사람이 오류를 알아내는 데 도움이 있나요?
당신의 값으로'this.handleAddChosen'을 통과에도 불구하고, 명확한'ChosenList' 구성 요소가이 오류의 근원이다, 그리고 그 이상 ... 그것은 함께 핸들러를 통과해야합니다'소품 onToggle' 이 구성 요소에는 아무 곳에서나 선언 된 'handleAddChosen'이 없습니다. 당신은'undefined'를 전달하고, 물론 undefined는 함수가 아닙니다. –
코드를 전사하는 데 실수를했습니다. handleAddChosen은 handleAddResult 대신 올바른 함수 이름입니다. – mGarsteck
'ChosenList'에 대한 코드가 보이지 않습니다. – rfornal