如何通过映射material-ui网格组件添加json答案

【问题标题】：how to add json through mapping material-ui grid component如何通过映射material-ui网格组件添加json
【发布时间】：2021-01-28 01:52:32
【问题描述】：

我想像图片一样将json数据添加到4ColorCards，但是title``color``rating渲染失败，请看下面的代码：

import ColorCard from "./ColorCard"
import React from "react"
import data from "./initialState.json"

export default function ColorCards(){
const dataColors=data.colors
  return(
    dataColors.map(
      (n,color)=>(
        <ColorCard 
        key={color.id}
        title={color.title}
        color={color.color}
        rating={color.rating}
      

        />
      )
    )

  )
}

完整项目链接：https://codesandbox.io/s/material-demo-forked-62eh0?file=/index.js

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Here 是工作沙箱。

我所做的只是从(n,color)=>( 转换为(color)=>(

详细了解map 的工作原理here

【讨论】：