React运行报错TypeError: Cannot read properties of undefined (reading 'map')如何解决

这个报错的本质是你调用map方法的products变量值为undefined，结合你的代码具体触发原因如下：

• 变量作用域冲突：你在组件外部定义了全局的products数组，但Products组件优先读取的是props解构出来的products参数。如果父组件调用Products时没有传入products属性，组件内拿到的products就是undefined，直接调用map就会触发报错。
• 额外语法错误：map遍历的回调参数命名为products，和遍历的数组同名，但后续取id时写的是product.id，变量名不匹配，即使数组存在也会触发未定义报错；同时Grid标签重复声明了item属性、map表达式末尾多了冗余分号、未给Product组件传入商品数据，都属于需要修正的问题。

根据你的使用场景二选其一处理数组来源，再修正语法问题即可：

场景1：需要父组件传入商品列表 #

给props的products设置默认空数组兜底，避免未传参时为undefined：

import React from 'react';
import Grid from '@material-ui/core/Grid';

import Product from './Product/Product';
import useStyles from './styles';

// 给products设置默认空数组兜底
const Products = ({ products = [] }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {/* 修正回调参数名，去掉重复item属性，给Product组件传值 */}
        {products.map((product) => (
          <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
            <Product product={product} />
          </Grid>
        ))}
      </Grid>
    </main>
  );
};

export default Products;

场景2：不需要父组件传值，直接用本地定义的商品列表 #

删除组件参数的解构，直接使用外部定义的products数组即可：

import React from 'react';
import Grid from '@material-ui/core/Grid';

import Product from './Product/Product';
import useStyles from './styles';

const products = [
  {id: 1, name: 'Shoes', description: 'Running Shoes.' },
  {id: 2, name: 'MacBook', description: 'Apple MacBook.' },
];

// 去掉参数解构，直接使用本地数组
const Products = () => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products.map((product) => (
          <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
            <Product product={product} />
          </Grid>
        ))}
      </Grid>
    </main>
  );
};

export default Products;

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