如何从对象数组中迭代和提取单个对象以在 React 中渲染

Question

我从 API 中获取一些数据，这些数据以对象数组的形式出现，我想提取它们并解构它们，以便我可以使用它们在 React 中渲染组件。我已经取得了一些成就，但这种方式我不是 KISS，而且渲染它是为每个项目创建 6 次，所以我有 24 个div。

数据是这样的，“每小时”数组包含 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>

我知道我缺少一种非常明显的方法来从数组中获取每个对象，这样我就可以更好地渲染它。

Answer 1

你说得对，你可以更有效地做到这一点。您只需要映射一次。你可以使用一个片段来封装多个元素，这个片段永远不会被渲染，但允许你有多个孩子。

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

您无需多次映射此数组。

顺便说一句，不需要键的片段可以在 JSX 中写为空标签：

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