Question

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

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"
     }
   ]}
 ]}

在我的浏览器中，它显示警告：列表中的每个孩子都应该有一个唯一的“键”道具。并且数据不会呈现，它只会显示“名称：”，而没有区域名称从数据集中。我是否以错误的方式映射数据？帮助TT

Answer 1

只需替换

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} )

使用

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

Answer 2

您有2个选择...好吧，3个。

您需要在“ 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"
      }
    }
  ]
}

道具数据未呈现

2 个答案: