React渲染分类函数报错：返回无效对象问题排查求助

Let's break down why this error is happening and fix it step by step. That error message tells us React isn't receiving a valid render output from your renderCategories function—most likely because we're not handling edge cases for the categories prop properly.

What's Causing the Problem? #

Your function depends entirely on props.categories.map() to return JSX elements. But if props.categories is undefined, null, or not an array (like when your data is still loading, or the parent component forgets to pass the prop), calling .map() on it will either throw an error or leave your function returning undefined—which React rejects as a valid render result.

The Fix: Add Guard Clauses & Safe Defaults #

We need to ensure we only run .map() when categories is a valid array, and provide a fallback if it's not. Here are two clean approaches:

Option 1: Explicit Null Check

Add a quick check at the start of the function to handle missing or invalid categories:

const renderCategories = (props) => {
  console.log(props);
  
  // If categories doesn't exist or isn't an array, return null (React skips rendering this)
  if (!props.categories || !Array.isArray(props.categories)) {
    return null;
  }
  
  return props.categories.map(category => (
    <Category
      key={category.categoryID}
      category={category}
      isSelected={props.selectedCategory === category.categoryID}
      setSelectedCategory={props.setSelectedCategory}
    />
  ));
};

Option 2: Safe Default with Nullish Coalescing

Use the nullish coalescing operator (??) to fall back to an empty array if categories is missing:

const renderCategories = (props) => {
  console.log(props);
  
  // Use empty array as fallback if categories is undefined/null
  return (props.categories ?? []).map(category => (
    <Category
      key={category.categoryID}
      category={category}
      isSelected={props.selectedCategory === category.categoryID}
      setSelectedCategory={props.setSelectedCategory}
    />
  ));
};

Bonus: Prevent the Issue at the Source #

To avoid this problem entirely, make sure the parent component passes a valid array for categories even when data is loading. For example, if you're using useState to hold categories, initialize it with an empty array:

// In parent component
const [categories, setCategories] = useState([]);

This way, props.categories will never be undefined—even before your API call finishes.

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