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

如何解决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的{​​{1}}值。

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

是否有条件设置我只能参加地图竞赛，并有单独的页面来进行公民投票？我如何在映射数组之前（之前/之后/之后）分离它们？

OR

是否有一种方法可以动态映射键的值而不管其标识符如何？

还有其他想法吗？

解决方法

是否有一种方法可以动态映射键的值而不管其标识符如何？

您可以使用Object.keys：

Object.keys(contest).map(key => console.log(key))

,

我最终使用>>> int(hashlib.sha256(str.encode(s)).hexdigest(),16) Output: a very long integer (on another system cannot copy it) 语句将API的返回数据分为3类，然后制作了一个组件以分别加载每个组件，因为它们受益于不同的格式

但这是我创建的用于调试返回数据的初始页面。它分离数据，但全部显示在一页上，并根据返回的对象进行条件渲染：

if