时间戳

首页 > 解决方案 > 如何过滤掉 Typescript 中的空对象？

reactjs - 如何过滤掉 Typescript 中的空对象？

问题描述

我希望你能帮助我。

我正在使用 mapbox-gl 创建地图，并且正在渲染一些坐标 [lon, lat]。

虽然有些值是空的，所以我试图使用reducer将它们过滤掉，但是对于那些空值，我只创建一个我无法删除的空对象并得到一个错误（filteredPositions.lon -> error: Property 'lon ' 类型 '{}' 上不存在）

我怎样才能只渲染那些非空值的集群？这是我的代码：

    <Cluster ClusterMarkerFactory={clusterMarker} zoomOnClick>
    {systems.map(({ last_position, id }) => {

        const filteredPositions = Object.entries(last_position).reduce((a,[k,v]) => (v == null ? a : {...a, [k]:v}), {})

        return (
          <SystemMarker
            key={id}
            coordinates={[filteredPositions.lon, filteredPositions.lat]}
            heading={0}
            id={id}
            onClick={onSystemSelect}
          />
        )
    })}
    </Cluster>

标签： reactjstypescriptfilter

解决方案

reducer 应该对列表的元素进行一些计算并只返回一个元素。典型的用例是计算列表元素的总和：

let list = [1,2,3,4,5]
let sum = list.reduce((prev, curr) => prev + curr, 0); // 15

如果要过滤列表。有一个filter方法。尝试使用它。

const filteredPositions = Object.entries(last_position).filter(([k,v]) => v !== null)

推荐阅读