React中如何统计数组内url不为null的对象元素数量？

你定义的React状态数组如下：

const [UploadLogos, setUploadLogos] = useState([
  { url: null, name: null},
  { url: 'anyURL', name: null},
  { url: null, name: null}
]); 

你尝试用以下代码统计url不为null的元素数量，但无法得到正确结果：

const UploadedLogosWithURL = UploadLogos.map((logo) => {
  return logo.url !== null;
})

<button onClick={() => { console.log(UploadedLogosWithURL.length) }}>
  Click
</button>

问题所在 #

map方法的作用是遍历原数组，将每个元素转换为新值并返回等长度的新数组。你的代码会生成一个布尔值数组[false, true, false]，它的长度和原数组完全一致（这里是3），所以无论多少元素满足条件，打印的都是原数组的长度，自然无法得到正确的统计数。

正确实现方式 #

方式1：使用filter过滤后取长度

filter会返回一个仅包含满足条件元素的新数组，直接取这个新数组的长度就是你要的数量：

const UploadedLogosCount = UploadLogos.filter(logo => logo.url !== null).length;

<button onClick={() => { console.log(UploadedLogosCount) }}>
  Click
</button>

方式2：使用reduce直接计数

reduce可以遍历数组并累积计算结果，适合直接统计符合条件的元素数量：

const UploadedLogosCount = UploadLogos.reduce((count, logo) => {
  return logo.url !== null ? count + 1 : count;
}, 0);

<button onClick={() => { console.log(UploadedLogosCount) }}>
  Click
</button>

内容的提问来源于stack exchange，提问作者s.kuznetsov