如何迭代和取单一的对象，从一系列的对象，呈现在起反应

Question 1

我得到一些数据从一个API的到来作为一系列的目的及希望取他们和解构它们所以我可以用它们来呈现的一个组件在作出反应。我已经实现的东西somewaht但是这种方式我不亲吻也呈现的是创造项目6次，对他们每一个人所以我有24divs.

数据来像这样，"每小时"列有48个对象。我已经切片列为仅使用六种正如所有我需要的。

"hourly": [
{
  "dt": 1618315200,
  "temp": 282.58,
  "feels_like": 280.4,
  "pressure": 1019,
  "humidity": 68,
  "dew_point": 276.98,
  "uvi": 1.4,
  "clouds": 19,
  "visibility": 306,
  "wind_speed": 4.12,
  "wind_deg": 296,
  "wind_gust": 7.33,
  "weather": [
    {
      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02d"
    }
  ],
  "pop": 0
},
...

这是什么我在我的返回和内部标签的工作，但我不认为是最好的方式做到这一点，也是一个噩梦式正确，因为它创建了六个项目中的每一个时间：

<div className="weather-info-extra">
    {shortedArr.map((i, index) => (
      <div key={index}>
        {new Date(i.dt * 1000).toLocaleTimeString([], {
          timeZone: timezone,
          hour: '2-digit',
          minute: '2-digit',
          hour12: true,
        })}
      </div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>{i.weather.map(w => w.description)}</div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>{i.temp} C</div>
    ))}
    {shortedArr.map((i, index) => (
      <div key={index}>
        <p>Rain</p>
        {i.pop}%
      </div>
    ))}
  </div>

我知道有一个非常显而易见的方式，我们缺少的，获得各个对象从该阵列所以我可以使它更好。

Question 2

你是对的，你可以做到这一点，效率更高。你只需要地图一次。你可以使用一个片段将疫苗的多个元素，这个片段是从未呈现的，但允许有多个孩子。

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

有没有需要你的地图这一系列多次。

只是一个侧面说明，碎片，不需要钥匙可以写作空标记在代码:

<> /** React fragment code here */ </>

David Barker · Answer 1 · 2021-11-24T09:15:08

你是对的，你可以做到这一点，效率更高。你只需要地图一次。你可以使用一个片段将疫苗的多个元素，这个片段是从未呈现的，但允许有多个孩子。

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

有没有需要你的地图这一系列多次。

只是一个侧面说明，碎片，不需要钥匙可以写作空标记在代码:

<> /** React fragment code here */ </>

很好的答案，但这将产生一个错误，由于没有独特的"关键"的支柱。变化的片段带键的片段或键div你会得到我的票
Holly圣人！这是spoooot！很简单，我知道有更好的方法我是领导在正确的方向只是为了我的生活无法弄清楚昨天晚上哈哈！谢谢你！

如何迭代和取单一的对象，从一系列的对象，呈现在起反应

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别