[英]Why does this code return an array of undefined values along with the other values?
[英]Why does map() return an array with undefined values?
我正在嘗試建立過濾器系統。 有兩個過濾器菜單。 一個是房間的數量,另一個是財產的類型。 我已經從api加載了json文件到space對象。 但是,當我嘗試將所有這些空間傳遞給SpaceFilterResults組件時,我的空間數組將返回為[undefined,undefined]。
我的過濾器代碼
class FilterSpace1 extends React.Component {
constructor() {
super();
this.handleFormInput = this.handleFormInput.bind(this);
this.state = {
space:[],
propertyType: 0,
rooms: 0
}
}
componentDidMount(){
this.loadRoomFromServer();
}
loadRoomFromServer(){
$.ajax({
url:'/api/rentals/',
dataType:'json',
success: (data) => {
console.log('data',data);
this.setState({space: data.results});
console.log('success',this.state.space);
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
}
});
}
handleFormInput(propertyType, rooms) {
this.setState({
propertyType: propertyType,
rooms: rooms
})
}
render() {
let space = _.map(this.state.space, (space,id) => {
console.log('space is',space); // has an array as shown below
<SpaceFilterResults
key = {id}
space={space}
propertyType={this.state.propertyType}
rooms={this.state.rooms}
/>
});
console.log('space',space); //i get space [undefined, undefined] instead of all the spaces
return (
<div className="filter">
<SpaceFilterMenu
propertyType={this.state.propertyType}
rooms={this.state.rooms}
onFormInput={this.handleFormInput}
/>
{space}
</div>
)
}
}
class SpaceFilterMenu extends React.Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.props.onFormInput (
this.refs.propertyTypeInput.value,
this.refs.roomsInput.value
);
}
render() {
return (
<div className="container">
<div className="row">
<form className="filter-menu">
<label htmlFor="roomsInput">Number of rooms</label>
<select id="roomsInput" ref="roomsInput" onChange={this.handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label htmlFor="propertyTypeInput">propertyType</label>
<select id="propertyTypeInput" ref="propertyTypeInput" onChange={this.handleChange}>
<option value="Appartment">Appartment</option>
<option value="House">House</option>
<option value="Shop">Shop</option>
<option value="Bunglow">Bunglow</option>
</select>
</form>
</div>
</div>
);
}
}
class SpaceFilterResults extends React.Component {
constructor() {
super();
}
render() {
var results = [];
this.props.space.map((space) => {
if(this.props.roomsInput===0){
results.push(<Space space = {space} />);
}
else if (space.roomsInput === this.props.roomsInput) {
results.push(<Space space={space} />);
}
});
this.props.space.map((space) => {
if (this.props.propertyType === 0 ) {
results.push(<Space space={space} />);
}
else if (space.propertyType === this.props.propertyType) {
results.push(<Space space={space} />);
}
});
return (
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="filter-results">
<ul className="blocks blocks_3up">
{results}
</ul>
</div>
</div>
</div>
</div>
)
}
}
class Space extends React.Component {
constructor () {
super();
}
render () {
return (
<li>
<div className="feature">
<div className="feature-hd">
<h2 class="hdg hdg_2">{this.props.space.listingName}</h2>
</div>
<div className="feature-bd">
<p>{this.props.space.room}</p>
</div>
<div className="feature-ft">
<p>{this.props.space.property}% rooms</p>
</div>
</div>
</li>
)
}
}
export default FilterSpace1;
我的json文件看起來像(/ api / rentals /)
console.log('space is',space)的輸出給出對象為{{id:1,renter:“ admin”,gallery:Array [2],ownerName:“ tushant khatiwada”,電子郵件:“ tushant @ gmail”。 com“ ...}
我做錯了什么? 如何將所有這些空間數據傳遞給SpaceFilterResults組件?
此map
回調:
let space = _.map(this.state.space, (space, id) => {
<SpaceFilterResults
key = {id}
space={space}
propertyType={this.state.propertyType}
rooms={this.state.rooms}
/>
});
不會返回任何東西。
這是另一個無效的示例:
let nums = [1, 2, 3].map(x => { x * 2 })
如果箭頭函數體是塊,則不會隱式返回任何內容。
// { x * 2; } is a block so this doesn’t work
let nums = [1, 2, 3].map(x => { x * 2; })
// x * 2 is an expression so this works
let nums = [1, 2, 3].map(x => x * 2)
如果在箭頭函數中使用{
和}
,則還必須使用return
語句:
// { x * 2 } is a block with a return so this works
let nums = [1, 2, 3].map(x => { return x * 2; })
因此,要修復您的代碼,請通過刪除{
和}
來使arrow函數主體成為表達式:
let space = _.map(this.state.space, (space, id) =>
<SpaceFilterResults
key = {id}
space={space}
propertyType={this.state.propertyType}
rooms={this.state.rooms}
/>
);
或將其保留為一個塊,但添加一個顯式的return
語句:
let space = _.map(this.state.space, (space, id) => {
return (
<SpaceFilterResults
key = {id}
space={space}
propertyType={this.state.propertyType}
rooms={this.state.rooms}
/>
);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.