Javascript TypeError无法读取属性'；国家代码'；空的

我使用React根据返回JSON数据的API调用呈现一个表

我得到了一个

TypeError

，因为它无法读取location对象，我也无法找出原因

我在下面列出了错误、代码和JSON输出。所有其他字段都已成功渲染

错误

TypeError Cannot read property 'country_code' of null

<td>{host.ip_addresses[0].location.country_code}</td>

---

我建议使用lodash

npm i --save lodash

您可以将其作为

import _ from 'lodash';

在你的代码里

return (
<div>
  <Table variant="dark" responsive striped hover>
    <thead>
      <tr>
        <th>Hostname</th>
        <th>IPs</th>
        <th>Location</th>
        <th>ISP</th>
        <th>ASN</th>
      </tr>
    </thead>
    <tbody className="data">
      {hosts.map(host => (
        <tr key={host.name}>
          <td>{host.name}</td>
          <td>
            {host.ip_addresses.map((ip: any) => (
              <div key={ip.ip}>{ip.ip}</div>
            ))}
          </td>
          <td>
            {host.ip_addresses.map((ip: any) => (
              <div key={ip.reverse_dns}>{ip.reverse_dns}</div>
            ))}
          </td>

          <td>{_.get(host, "ip_addresses[0].location.country_code", "")}</td>
          <td>{host.ip_addresses[0].isp}</td>
          <td>{host.ip_addresses[0].asn}</td>
        </tr>
      ))}
    </tbody>
  </Table>
</div>
);
};

返回(
主机名
IPs
位置
网络服务提供商
ASN
{hosts.map（主机=>(
{host.name}
{host.ip_addresses.map（（ip:any）=>(
{ip.ip}
))}
{host.ip_addresses.map（（ip:any）=>(
{ip.reverse_dns}
))}
{{uu.get（主机，“ip地址[0]”。位置。国家/地区代码“，”）}
{host.ip_地址[0].isp}
{host.ip_地址[0].asn}
))}
);
};

---

这样它就不会抛出异常，您还可以在u.get函数的第三个参数中指定默认值。

我建议使用lodash

npm i --save lodash

您可以将其作为

import _ from 'lodash';

在你的代码里

return (
<div>
  <Table variant="dark" responsive striped hover>
    <thead>
      <tr>
        <th>Hostname</th>
        <th>IPs</th>
        <th>Location</th>
        <th>ISP</th>
        <th>ASN</th>
      </tr>
    </thead>
    <tbody className="data">
      {hosts.map(host => (
        <tr key={host.name}>
          <td>{host.name}</td>
          <td>
            {host.ip_addresses.map((ip: any) => (
              <div key={ip.ip}>{ip.ip}</div>
            ))}
          </td>
          <td>
            {host.ip_addresses.map((ip: any) => (
              <div key={ip.reverse_dns}>{ip.reverse_dns}</div>
            ))}
          </td>

          <td>{_.get(host, "ip_addresses[0].location.country_code", "")}</td>
          <td>{host.ip_addresses[0].isp}</td>
          <td>{host.ip_addresses[0].asn}</td>
        </tr>
      ))}
    </tbody>
  </Table>
</div>
);
};

返回(
主机名
IPs
位置
网络服务提供商
ASN
{hosts.map（主机=>(
{host.name}
{host.ip_addresses.map（（ip:any）=>(
{ip.ip}
))}
{host.ip_addresses.map（（ip:any）=>(
{ip.reverse_dns}
))}
{{uu.get（主机，“ip地址[0]”。位置。国家/地区代码“，”）}
{host.ip_地址[0].isp}
{host.ip_地址[0].asn}
))}
);
};

---

这样它就不会抛出异常，您也可以在u2;.get函数的第三个参数中给定一个默认值。

这是您的所有数据吗？我认为您的一个数据位置为空。这就是问题所在。@Jagan是的，你是对的……我出于发布目的截断了数据，但找到了一个位置为空的条目。这是你的全部数据吗？我想你的一个数据位置为空。这就是问题所在。@Jagan是的，你是对的……我出于发布目的截断了数据，但找到了一个位置为空的条目。