在React中从数组中过滤出空值

我想在React中跳过数组中的所有null值,这是我代码的一部分,我在map函数之前添加了过滤器,但它看起来不起作用。

componentDidMount(){
        client.getEntries({content_type:'formRequest'}).then(response => {
            this.setState({qoutes: response.items});
        }).catch(e => {
        console.log(e);
        });
    }

render(){

        const user = "name";
        const qoutes = this.state.qoutes
        .filter(i => i !== null)
        .map((qoute, i) => 
        user === qoute.fields.user || user === qoute.fields.company ?
        <QoutesListItem id={i} key={i} qoute={qoute} />
        : null)

        return(<div>{qoutes}<div>)

enter image description here

我试着做了这样的函数,但效果不好。

const qoutes = this.state.qoutes.filter((qoutes)=>{
    if(qoutes !== null ) {
      return qoutes;
    }}).map((qoute, i) => 

如何避免空值并获得可用数据(在我的例子中只有三个对象)?

解决方案:

再次过滤结果以删除 null 的元素。

render(){
  const user = "name";
  const qoutes = this.state.qoutes
    .filter(q => !!q)
    .map((qoute, i) => 
        user === qoute.fields.user || user === qoute.fields.company ?
          <QoutesListItem id={i} key={i} qoute={qoute} />
          : 
          null)
    .filter(q => !!q) // Filter falsy values

  return(<div>{qoutes}<div>)

给TA打赏
共{{data.count}}人
人已打赏
解决方案

javascript查询选择器和const问题

2022-5-12 3:00:15

解决方案

为什么当我去打印我的链接列表时,我得到了一个读取访问违规的信息?

2022-5-12 3:00:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索