javascript - Prop 数据未渲染

Question

我在渲染 Prop 数据时遇到问题
在这里，我尝试将 Prop 传递给具有示例数据集中的映射数据的组件

const weatherComponents = weatherData.items.map(weather => {
  return(
    <div key={weather.forecasts.area}>
      <WeatherForecast 
        name={weather.forecasts.area}
        condition={weather.forecasts.forecast}>
      </WeatherForecast>
    </div>
    )})
return(
    {weatherComponents} )

这是组件

function WeatherForecast(props) {
return(
    <div>
        <p>Name: {props.name}</p>
        <p>Condition: {props.condition}</p>
    </div>
)}

这是示例数据集

   {
 "area_metadata": [
   {
     "name": "Yishun",
     "label_location": {
       "latitude": 1.418,
       "longitude": 103.839
     }
   }
 ],"items": [
   {
     "forecasts": [
     {
       "area": "Yishun"
       "forecast" : "cloudy"
     }
   ]}
 ]}

在我的浏览器中，它显示警告:列表中的每个子项都应该有一个唯一的“key”属性。并且数据未呈现，仅显示“名称:”，没有区域名称从数据集中。我是否以错误的方式映射数据？帮助TT

Answer 1

你有 2 个选择……好吧，3 个。

1. 您需要在“area_metadata”和“items”中有一个数组:

1.1。快速解决方案:

const weatherComponents = weatherData.items.map(weather => {
  return(
    <div key={weather.forecasts[0].area}>
      <WeatherForecast 
        name={weather.forecasts[0].area}
        condition={weather.forecasts[0].forecast}>
      </WeatherForecast>
    </div>
  )
})

return({weatherComponents})

1.2 正确的解决方案:

const weatherComponents = weatherData.items.map(weather => {

  return weather.forecasts.map( casts => (
    <div key={casts.area}>
      <WeatherForecast 
        name={casts.area}
        condition={casts.forecast}>
      </WeatherForecast>
    </div>
  ))
})

return({weatherComponents})

2。您不需要数组:

{
  "area_metadata": [
    {
      "name": "Yishun",
      "label_location": {
        "latitude": 1.418,
        "longitude": 103.839
      }
    }
  ],
  "items": [
    {
      "forecasts": {
        "area": "Yishun"
        "forecast" : "cloudy"
      }
    }
  ]
}