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

Question

我从 API 获取一些数据，这些数据以对象数组的形式出现，我想提取它们并解构它们，以便我可以使用它们在 React 中呈现组件。我已经取得了一些成就，但通过这种方式我不是 KISS 并且渲染它是为每个项目创建 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
},
...

这是我在 return 和部分标签中得到的，它确实有效，但我认为这不是最好的方法，而且正确设置样式也是一场噩梦，因为它创建了六个每次项目：

<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 */ </>

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

How to iterate and extract single objects from an array of objects to render in React

arrays

reactjs

api

object

render