React 过滤器仍然输出过滤后的值

Question

我正在尝试过滤 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;

Answer 1

!!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;

React 过滤器仍然输出过滤后的值

React filter still outputting filtered values

null

filter

reactjs