arrays - React/NextJS：如何映射键更改的对象数组？

问题描述

我正在 NextJS 中做一个项目，我发现了一个有趣的问题，但我似乎找不到解决方案 -

我有一系列从 Civic GAPI 获得的对象。在这个阵列中，对象大多是大选竞赛，但也有一些是公投。contest和referendum对象具有不同的结构。

这是一个大选contest对象：

14:
candidates: (2) [{…}, {…}]
district: {name: "Thurston County", scope: "countywide", id: "ocd-division/country:us/state:wa/county:thurston"}
level: ["administrativeArea2"]
office: "Commissioner District 3"
roles: ["legislatorUpperBody"]
sources: [{…}]
type: "General"
__proto__: Object

这是一个referendum对象：

15:
district: {name: "Washington", scope: "statewide", id: "ocd-division/country:us/state:wa"}
referendumTitle: "Advisory Vote No. 8 (Senate Bill 6505)"
referendumUrl: "https://wei.sos.wa.gov/agency/osos/en/press_and_research/PreviousElections/2014/General-Election/Pages/Online-Voters-Guide.aspx"
sources: [{…}]
type: "Referendum"
__proto__: Object

这是呈现此数据的页面（我已包含整个页面，但显然您可以跳过从 GAPI 加载数据的条件）：

import useSWR from 'swr';

const Contests = (props) => {
  const url = '/api/voterInfo';
  const fetcher = (url) => fetch(url).then((r) => r.json());
  const { data, error } = useSWR(url, fetcher);

  if (error)
    return (
      <div className='alert alert-danger' role='alert'>
        <span className='sr-only'>Failed to load data!</span>
      </div>
    );

  if (!data)
    return (
      <div
        className='spinner-border spinner-border-lg text-danger'
        role='status'
        style={{ margin: '10rem', width: '20rem', height: '20rem' }}
      ></div>
    );

  if (data && data !== null) {
    const { contests } = data.data;

    return (
      <div>
        <table className='table table-hover'>
          <caption>List of contests in your area</caption>
          <thead style={{ fontFamily: 'Righteous, sans-serif' }}>
            <tr>
              <th scope='col'>#</th>
              <th scope='col'>Dist ID</th>
              <th scope='col'>Dist Name</th>
              <th scope='col'>Dist Scope</th>
              <th scope='col'>Office</th>
              <th scope='col'>Type</th>
            </tr>
          </thead>
          <tbody>
            {contests.map((contest, idx) => (
              <tr key={idx}>
                <th scope={idx}>{idx + 1}</th>

                <td>{contest.district.id}</td>
                <td>{contest.district.name}</td>
                <td>{contest.district.scope}</td>
                <td>{contest.office}</td>
                <td>{contest.type}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {console.log(contests[0].level[0])}
      </div>
    );
  }
};

export default Contests;

如果我只渲染第一级键值对，很容易看出contest和referendum对象的差异如何导致一个或另一个丢失值：

因为我已将地图设置为从中呈现键，contests所以错过了referendum键的值referendumTitle和referendumUrl.

处理这个问题的最佳方法是什么？我想出了两种可能的解决方案，但不确定如何实施：

是否有条件我可以设置为仅映射比赛，并有一个单独的页面来映射公投？我将如何分离它们（之前/之后/之后）映射一个数组？

或者

有没有办法动态映射键的值而不管它们的标识符是什么？

还有其他想法吗？

标签： arraysreactjsdictionarynext.js

arrays - React/NextJS：如何映射键更改的对象数组？

问题描述

解决方案

推荐阅读