为啥 map() 返回一个未定义值的数组？

Posted 2023-02-22

【中文标题】为啥 map() 返回一个未定义值的数组？

【英文标题】：Why does map() return an array with undefined values?为什么 map() 返回一个未定义值的数组？

【发布时间】：2016-09-01 00:49:06

【问题描述】：

我正在尝试构建过滤系统。有两个过滤器菜单。一个是房间数量，另一个是财产类型。我已将 json 文件从 api 加载到空间对象。但是当我尝试将所有这些空间传递给 SpaceFilterResults 组件时，我的空间数组返回为 [未定义，未定义]。

我的过滤器代码

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) 的输出给出空间是 Object id: 1, renter: "admin", gallery: Array[2], ownerName: "tushant khatiwada", email: "tushant @gmail.com"…

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

【问题讨论】：

loadRoomFromServer 应该是一个中间件，你想让你的组件保持“纯”功能

constructor () super(); 这个没用

【参考方案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
    />
  );
);

【讨论】：

为什么在 ajax 成功函数 this.state.space 中显示了一个对象数组，但是当我在渲染函数上进行控制台时，我得到了未定义？

map() 返回您从回调中返回的 new 项数组。所以this.state.space 是您的原始数组，而_.map 的结果是带有undefined 项的不同数组，因为您没有从回调中返回任何内容。