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()仅可用于数组。选中here for more details。因此，当您尝试在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.country是否为true，然后应用map方法，否则您只需返回{{ 1}}的内容为“数据正在加载！”在加载数据之前。

为澄清起见，我们在代码的开始位置{strong>内的右端加括号div和props.country ?的右端添加{在最后一个括号: <div>Data Loading!</div>之后之后和在括号)之前之前。

现在，此}可以是您无需放置div或文本即可的任何内容，而您可以简单地放置<div>Data Loading!</div>，但是在这几秒钟内获取数据之前，将有空白空间您的输出将是。

要在其中放置什么内容的实验，但是最好的做法是放置诸如微调框或样式化消息之类的装载程序，以指示您的数据已被提取。

修改：您还可以将null初始化为数组，这样即使在其为空的情况下，在其上使用props.country也不会自动解决错误。如果将它作为道具从您的父组件的状态传递下来，只需执行：

.map

解决该问题的现有方法更好。但是您可能仍然应该习惯于使用最终将保存的数据来初始化状态属性。

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;

map（）中的三元运算符有反应

2 个答案: