AJAX请求返回含中划线属性的对象时如何在JSX中正确调用

• JavaScript 中如果对象属性名包含中划线、空格等不符合标识符命名规范的字符，不能使用 . 操作符访问，必须使用方括号+属性名字符串的语法读取，对应 sales-price 属性的正确写法为 product['sales-price']。
• 原有代码存在变量名拼写不匹配的问题：map 方法回调的入参命名和循环体内使用的变量名不一致，会触发未定义报错，需统一变量命名。

修正后的代码如下：

render(){
    return(
        <div>{
            this.state.products.map((product) => {
                return <div>
                         <p>{product.id}</p>
                         <p>{product.name}</p>
                         <p>{product['sales-price']}</p>
                       </div>
            })
        }</div>
    );
}

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