map() 反应中的三元运算符

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;

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

Answer 1

您的代码的问题是您的数据props.country在定义数据之前就已被映射，并且我们知道 map 方法.map()只能在数组上使用。请查看此处了解更多详细信息。因此，当您尝试使用map某些东西时undefined，它会抛出该错误。

首先是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>}

因此，我们在这里要做的是添加另一个三元条件语句来检查if props.countryTHENtrue应用该map方法，否则您只需返回div内容“数据加载！” 在数据加载之前。

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

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

尝试一下你想放在那里的东西，但最好是放一个加载器，比如旋转器或样式化的消息来指示你的数据正在被获取。

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

state = {
   country: []
}

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