时间戳

首页 > 解决方案 > 反应过滤器仍然输出过滤值

reactjs - 反应过滤器仍然输出过滤值

问题描述

我正在尝试过滤 name 值为空白或 null 的对象数组。但是，包含 - "" - 的名称值仍会呈现给浏览器。你能看看我的代码并告诉我我做错了什么吗？谢谢你。

import NameList from './NameList.js';

const ItemTable = (props) => {

    const filteredNames = props.items.filter(function (item) {
        return item.name !== null || item.name !== "";
    });

    return (
        <ul>
            {filteredNames.map((item) => (
            <NameList
                key={item.id}
                listId={item.listId}
                name={item.name}
            />
            ))}
        </ul>
    );
    
}

export default ItemTable;

标签： reactjsfilternull

解决方案

!!value将检查 value 中的变量是否具有有效内容。您也不需要创建另一个不需要的数组。可以直接渲染。

import NameList from "./NameList.js";

const ItemTable = (props) => (
  <ul>
    {
      props.items.map((item) => (
        !!item.name ?
          <NameList key={item.id} listId={item.listId} name={item.name} /> 
        : 
          null
      ))
    }
  </ul>
);

export default ItemTable;

推荐阅读