Question

我在API中加载了Json数组

我用

打电话给他们

categories.map((i,j) =>{
  return (<Tab label={'' + i.Name} key={j}/> );
})

显示为时尚，健康，未定义，未定义，未定义，因为141到321之间的数字未定义。

如何在答案中阻止undefined打印？谢谢。

Answer 1

您可以有条件地退回：

categories.map((i,j) =>{
  return (i.svcName && <Tab label={'' + i.svcName} key={j}/> );
})

<强>更新
反应的例子：

＆＃13;

const arr = [{
    val: 1
  },
  {
    val: 2
  },
  {
    val: false
  },
  {
    val: ''
  },
  {
    noval: 'blahh'
  },
  {
    val: 3
  },
  {
    val: undefined
  },
  {
    val: 4
  },
]

const Tab = ({ value }) => <div className="tab">{value}</div>;

class App extends React.Component {
  render() {
    return(
      <div>
      {
        arr.map((obj, i) => obj.val && <Tab value={obj.val} key={i} />)
      }
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

＆＃13;

.tab{
  height: 50px;
  width: 100px;
  display:inline-block;
  background-color: #333;
  color:#fff;
  text-align:center;
  border: 1px solid #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

修改
正如@Chris在回答中提到的，我的方法将排除null，undefined，""，0，NaN等falsy values等。

Answer 2

您必须首先检查数组中每个项目的值是否未定义：

categories.map((i,j) =>{
  return (i.svcName !== undefined && <Tab label={'' + i.svcName} key={j}/> );
});

这明确检查svcName不是undefined，但是null，空字符串或任何其他有价值的值都会通过评估。

如果您想检查虚假值，请查看@ Sag1v的建议。

Answer 3

如果你不想要[el, el, el, false, el, el]这样的地图功能结果，你应该在之前使用过滤器：

categories.filter(el => el.svcName !== undefined).map((i,j) =>{
  return (<Tab label={'' + i.svcName} key={j}/> );
})

Answer 4

Array#Filter＆amp; Array#Map

categories.filter(i => i.svcName !== undefined).map((x,i) => <Tab label={'' + x.svcName} key={i}/>);

如何删除未定义的JSON对象

4 个答案: