reactjs – 在React中使用.map()时处理空数组

发布时间：2020-12-15 05:04:28 所属栏目：百科来源：网络整理

导读：我有一个React.JS组件,它将notes变量映射到显示. 但是,我遇到了没有笔记和收到错误的问题.什么是接近这个的正确方法？这是代码： import React,{Component} from 'react';class List extends Component { constructor(props){ super(props); }render(){ var

我有一个React.JS组件,它将notes变量映射到显示.

但是,我遇到了没有笔记和收到错误的问题.什么是接近这个的正确方法？

这是代码：

import React,{Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items.map((item,i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

如果要在至少存在一个音符时呈现音符,并且在数组中没有音符时使用默认视图,则可以将渲染函数的返回表达式更改为：

return(
  <div className='list'>
      {notes.length ? notes : <p>Default Markup</p>}
  </div>
);

由于JavaScript中的空数组是真实的,因此您需要检查数组的长度而不仅仅是数组的布尔值.

请注意,如果您的items prop为null,则会导致异常,因为您要在null值上调用map.在这种情况下,我建议使用Facebook的prop-types库默认情况下将项目设置为空数组.这样,如果没有设置项目,组件将不会中断.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!