React.js中使用.reduce处理null值时遇类型错误的技术问询

Hey there! That error is super common when working with arrays that have inconsistent data—let's figure out why your null check isn't catching it and how to fix it.

The Root Cause #

Chances are, your current check is only verifying if the category property exists, but not whether the item itself is null/undefined in the array. For example, if you have something like this:

// ❌ This will throw an error if any item is null
const groupedData = yourArray.reduce((acc, item) => {
  if (item.category) { // If item is null, accessing item.category crashes here
    acc[item.category] = (acc[item.category] || 0) + 1;
  }
  return acc;
}, {});

When the loop hits a null item in the array, trying to access item.category immediately triggers the "Cannot read property 'category' of null" error—your check for item.category never even runs because the item itself is null.

Solutions to Fix the Error #

1. First Check if the Item is Not Null/Undefined

Add a guard clause at the start of your reduce callback to skip any null/undefined items entirely:

// ✅ Safe: Skip null/undefined items first
const groupedData = yourArray.reduce((acc, item) => {
  // Skip if the item itself is null or undefined
  if (!item) return acc;

  // Now safely check for the category property
  if (item.category) {
    acc[item.category] = (acc[item.category] || 0) + 1;
  }
  return acc;
}, {});

2. Use Optional Chaining for Concise Safety

If your React project supports ES2020+ (which most modern setups do), you can use the optional chain operator (?.) to safely access nested properties without explicit null checks:

// ✅ Even cleaner with optional chaining
const groupedData = yourArray.reduce((acc, item) => {
  // item?.category returns undefined if item is null/undefined
  const category = item?.category;
  if (category) {
    acc[category] = (acc[item.category] || 0) + 1;
  }
  return acc;
}, {});

This operator short-circuits and returns undefined instead of throwing an error when it hits a null/undefined value in the property chain.

3. Handle Cases Where category is Null

If some items exist but have a null value for category (not just missing the field), you can extend your check to exclude those too:

// ✅ Skip items where category is null or missing
const groupedData = yourArray.reduce((acc, item) => {
  if (!item) return acc;
  // Exclude null/undefined category values
  if (item.category != null) {
    acc[item.category] = (acc[item.category] || 0) + 1;
  }
  return acc;
}, {});

The != null check catches both null and undefined values for category.

Quick Recap #

The key fix here is validating the item itself before accessing any of its properties. Your original check was targeting the category field, but the error was happening because you tried to access that field on a null item. Adding a guard clause for the item itself (or using optional chaining) will prevent that error from firing.

内容的提问来源于stack exchange，提问作者karl