map() 中的三元运算符 react

Question

>我在 React 中创建了一个应用程序，它使用州代码显示州假日。现在我想知道如何在用户键入不存在的状态代码或更多字符时处理错误。这是我的尝试。

import React from "react";
const Holidays = props => {
if (props.dataLoaded === false) {
return null;
} else {
return (
<div className="table-responsive">
<table>
<thead>
<tr>
<th>Holiday</th>
<th>Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{props.country.map((country, index) =>
country && index === undefined ? (
<p>{props.error}</p>
) : (
<React.Fragment key={index}>
<tr>
<td className="holiday-name">
<strong>{country.name}</strong>
<br />
<p>{country.description}</p>
</td>
<td className="holiday-date">
{country.date.datetime.day}.{country.date.datetime.month}.
{country.date.datetime.year}
</td>
<td className="holiday-type">
{country.type[0]} {country.type[1]}
</td>
</tr>
</React.Fragment>
)
)}
</tbody>
</table>
</div>
);
}
};
export default Holidays;

但是，使用此代码，当键入不存在的状态代码或更多字符时，它会引发错误"类型错误：无法读取未定义的属性'map'"。任何帮助都是可以接受的

Answer 1

代码的问题在于您的数据props.country在定义数据之前就被映射了，正如我们所知，map方法.map()只能在数组上使用。查看此处了解更多详情。因此，当您尝试在undefined的东西上使用map时，它会抛出该错误。

它最初undefined的原因在大多数情况下是因为您从服务器或某些公共 API 从后端获取数据。在正在获取的数据的操作完成之前，您的props.country将未定义或初始化它的任何内容。

您应该做的是更改您当前的代码：

{props.country.map((country, index) =>
country && index === undefined ? (
<p>{props.error}</p>
) : (
<React.Fragment key={index}>
<tr>
<td className="holiday-name">
<strong>{country.name}</strong>
<br />
<p>{country.description}</p>
</td>
<td className="holiday-date">
{country.date.datetime.day}.{country.date.datetime.month}.
{country.date.datetime.year}
</td>
<td className="holiday-type">
{country.type[0]} {country.type[1]}
</td>
</tr>
</React.Fragment>
)
)}

如下所示，我们会检查您的props.country并确保它已加载 - 一旦加载，然后尝试在其上使用map来呈现内容。

{props.country ? props.country.map((country, index) =>
country && index === undefined ? (
<p>{props.error}</p>
) : (
<React.Fragment key={index}>
<tr>
<td className="holiday-name">
<strong>{country.name}</strong>
<br />
<p>{country.description}</p>
</td>
<td className="holiday-date">
{country.date.datetime.day}.{country.date.datetime.month}.
{country.date.datetime.year}
</td>
<td className="holiday-type">
{country.type[0]} {country.type[1]}
</td>
</tr>
</React.Fragment>
)
): <div>Data Loading!</div>}

所以我们在这里做的是添加另一个三元条件语句来检查ifprops.countrytrue然后应用map方法，否则您只需div在加载数据之前返回内容为"数据加载！

为了澄清，我们将props.country ?在代码开头的左大括号{内添加，并在最后一个右括号)之后和右大括号}之前的末尾添加: <div>Data Loading!</div>。

现在这个<div>Data Loading!</div>可以是任何你不必放置div或文本的东西，你可以简单地放null，但是在那些瞬间获取数据之前，你的输出会有空白空间。

尝试一下你想放在那里的东西，但更好的办法是放一个加载器，如微调器或样式化的消息，以指示你的数据正在被获取。

编辑： 您还可以将props.country初始化为数组，这样即使它为空，在其上使用.map也不会自动解析为错误。如果这是从父组件的状态作为 props 传递下来的，只需执行以下操作：

state = {
country: []
}

不过，以前解决此问题的方法更好。但是，您可能仍然应该习惯于使用状态属性最终将保存的数据来初始化它们。

Answer 2

import React from "react";
const Holidays = props => {
return (
<div className="table-responsive">
<table>
<thead>
<tr>
<th>Holiday</th>
<th>Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{!props.country || props.country.length == 0 ? <p>{props.error}</p> : props.country.map((country, index) =>
<React.Fragment key={index}>
<tr>
<td className="holiday-name">
<strong>{country.name}</strong>
<br />
<p>{country.description}</p>
</td>
<td className="holiday-date">
{country.date.datetime.day}.{country.date.datetime.month}.
{country.date.datetime.year}
</td>
<td className="holiday-type">
{country.type[0]} {country.type[1]}
</td>
</tr>
</React.Fragment>
)}
</tbody>
</table>
</div>
);
};
export default Holidays;