json 文件缺少括号答案

【问题标题】：json file missing Bracketsjson 文件缺少括号
【发布时间】：2021-10-17 06:13:10
【问题描述】：

用邮递员测试json格式

{
    "localTimeStamp": "2021-08-14T08:19:17.000Z",
    "ipAddress": "10.0.5.26",
    "subnetMask": "N/A",
    "defaultGateway": "N/A",
    "productType": "UNIVERGE BX9000",
    "versionID": "7.20A.256.721",
    "protocolType": "SIP",
    "operationalState": "UNLOCKED",
    "highAvailability": "Not Operational",
    "serialNumber": "9107130",
    "macAddress": "00908f8af6ba",
    "systemUpTime": 4049040,
    "saveNeeded": false,
    "resetNeeded": false
}

我在 nex.js 中使用此代码来获取信息

import styles from '../styles/Jobs.module.css'

export const getStaticProps = async () => {
  const res = await fetch('http://10.0.5.26/api/v1/status',{
    headers: { Authorization: "Basic passsssworrdssss" }
  }
  );
  const data = await res.json();
 
  return {
    props: { ninjas: data }
    
  }
}

const Ninjas = ({ ninjas }) => {
  console.log(ninjas)

  return (
    <div>
      <h1>All Ninjas</h1>
      {ninjas.map(ninja => (
        <div key={ninja.id}>
          <a className={styles.single}>
            <h3>{ ninja.productType }</h3>
          </a>
        </div>
      ))}
    </div>
  );
}
 
export default Ninjas;

错误是浏览器 enter image description here

认为问题在于 .map 函数仅在数组上可用。看起来数据不是您期望的格式（它是 {}，但我期待 []）。

希望有人知道解决错误的方法

console.log(ninjas) 的输出现在看起来没问题只是在浏览器中仍然出现错误

ReferenceError: ninja 未定义

[
  {
    localTimeStamp: '2021-08-14T10:30:35.000Z',
    ipAddress: '10.0.5.26',
    subnetMask: 'N/A',
    defaultGateway: 'N/A',
    productType: 'UNIVERGE BX9000',
    versionID: '7.20A.256.721',
    protocolType: 'SIP',
    operationalState: 'UNLOCKED',
    highAvailability: 'Not Operational',
    serialNumber: '9107130',
    macAddress: '00908f8af6ba',
    systemUpTime: 4056919,
    saveNeeded: false,
    resetNeeded: false
  }
]

【问题讨论】：

console.log(ninjas) 的输出是什么？

标签： html node.js reactjs json next.js

【解决方案1】：

它是一个对象，因此您无需遍历它即可获取内部值：

只需像这样直接访问它们：

<div>
    <h1>All Ninjas</h1>
    <div key={ninja.id}>
        <a className={styles.single}>
          <h3>{ ninja.productType }</h3>
        </a>
    </div>
</div>

- 请注意 id 在您的对象中不可用，因此 ninja.id 无效，返回未定义

- 考虑使用getServerSideProps 来获取每个请求的数据。因为getStaticProps 在构建时获取数据

【讨论】：

@clones 看起来您在想发表评论时试图编辑我的答案。请发布另一个问题，以便每个人都可以更好地关注该问题。
新错误 ReferenceError: ninja is not defined
输出 console.log(ninjas)
getStaticProps 是在构建时获取数据。改为getServerSideProps。这将获取每个请求的数据。

【解决方案2】：

props: { ninjas: data }

这里，根据你的描述，data 给出为

{ "localTimeStamp": "2021-08-14T08:19:17.000Z" ...}

所以ninjas 不是一个数组，它现在是一个普通的对象。

ninjas.map 要求 ninjas 是一个数组，因为它不是，所以发生了错误。

要修复它，你可以修复这个部分。

props: { ninjas: [data]}

【讨论】：

更改道具时出现不同的错误：{ ninjas: [data]} error= ReferenceError: ninja is not defined