React导入JSON字符串渲染列表提示缺少逗号，如何定位解决

错误原因 #

报错由Products.js第8行的语法错误导致：Array.map()调用结尾存在多余的闭合括号，JavaScript解析器无法识别该语法结构，因此抛出逗号缺失的错误提示。
除此之外你还有一处不符合React规范的写法：列表渲染要求的key属性必须绑定在map方法返回的直接子元素上，你当前把key写在Product组件内部的li标签上，后续可能触发key相关的运行时警告。

修正后的Products.js代码 #

import React from 'react';
import Product from './Product.js'
import { productsJson } from './ProductRecords';
const products = JSON.parse(productsJson);
function Products() {
  const listProducts = products.map(
    (product) => 
    <Product key={product.id} id={product.id} name={product.name} type={product.type}/>
  );
  return (
    <div>
      <ul>
        {listProducts}
      </ul>
    </div>
  );
}

export default Products;

同步修正Product.js（移除内部冗余的key属性） #

import React from 'react';

function Product(props){
  return(
    <li>{props.id}{props.name}{props.type}</li>
  );
}
export default Product;

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