Question

我正在尝试构建过滤系统。有两个过滤菜单。一个是房间数，另一个是房产类型。我已经从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 / rental /）

console.log的输出（＆＃39;空间是＆＃39;，空格）给出的空间是Object {id：1，renter：＆＃34; admin＆＃34;，gallery：Array [2]，ownerName ：＆＃34; tushant khatiwada＆＃34;，email：＆＃34; tushant@gmail.com" ...}

我做错了什么？如何将这些所有空间数据传递给SpaceFilterResults组件？

Answer 1

此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; })

因此，要修复代码，请删除{和}，使箭头函数体成为表达式：

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}
    />
  );
});

为什么map（）返回一个具有未定义值的数组？

1 个答案: