React应用state渲染异常：categories状态无法正常渲染

你在categorize函数里返回的是Map对象，但Object.keys()只能遍历普通JavaScript对象的键名，对Map类型无效，所以页面上{categories && Object.keys(categories)}没法渲染出内容。而console.log能正常显示Map，是因为浏览器控制台会专门处理Map的展示逻辑。

有两种简单的修复方式，选一种就行：

方案1：把Map换成普通对象存储分类 #

修改categorize函数，用普通对象代替Map：

function categorize(data) {
  const categories = {}; // 替换new Map()为普通对象
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var category = item.category;

    if (!categories[category]) {
      categories[category] = [];
    }
    categories[category].push(item);
  }
  return categories;
}

之后MenuSection里的Object.keys(categories)就能正常获取分类名数组，直接渲染即可。

方案2：保留Map，用Map原生方法获取键数组 #

如果想继续用Map，在MenuSection里改用Array.from()把Map的键转成数组：

<div>Testing: {categories && Array.from(categories.keys())}</div>
// 或者用展开运算符：
<div>Testing: {categories && [...categories.keys()]}</div>

可以把categories的初始状态从null改成空Map或空对象，避免每次渲染都要判断categories &&：

// 用Map的话
const [categories, setCategories] = useState(new Map());
// 用普通对象的话
const [categories, setCategories] = useState({});

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