Question

我有一个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;

Answer 1

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

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

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

请注意，如果您的items prop永远为null，那么会导致异常，因为您在空值上调用map。在这种情况下，我建议使用Facebook的prop-types库默认将items设置为空数组。这样，如果items未设置，则该组件不会中断。

Answer 2

这里是最简单的处理方式

  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;

尝试添加“？”对于您映射的数组

Answer 3

您只需为this.props.item

设置后备值即可

render() {
  const items = this.props.items || [] // if there's no items, give empty array
  const notes = items.map((item, i) => {
  return(
      ....

对空数组执行.map()不会产生错误，但会返回一个空数组。这很好，因为空数组是反应中的可渲染项目，并且不会在render()中产生错误，并且不会呈现注释，因为没有提供注释。

Answer 4

在组件中，您可以设置 defaultProps 属性以将props的初始值设置为：

static defaultProps = {
    items: []
};

在React中使用.map（）时处理空数组

4 个答案: