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: Cannot read property 'map' of undefined"。任何帮助都是可以接受的

Answer 1

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;

Answer 2

您的代码的问题是您的数据 props.country 在定义数据之前被映射，并且我们知道映射方法 .map() 只能用于数组。检查 here for more details。因此，当您尝试在 undefined 上使用 map 时，它会抛出该错误。

最初是 undefined 的原因是在大多数情况下，因为您正在从后端从服务器或某些 public 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 方法，否则你只需 return div 与内容 "Data Loading!" 在加载数据之前。

为了澄清，我们在您的代码内部左大括号 { 和 : <div>Data Loading!</div> 的开头添加 props.country ?右结束 after 最后一个右括号 ) 和 before 右花括号 }.

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

试验一下你想放在那里的东西，但最好是放一个加载器，比如微调器或样式化的消息，以表明你的数据正在被获取。

编辑：您还可以将 props.country 初始化为一个数组，这样即使在它为空时使用 .map 也不会自动解析为错误。如果这是作为 props 从你的父组件的状态传递下来的，简单地做：

state = {
   country: []
}

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

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

Ternary operator in map() react

javascript

dictionary

ternary

operator-keyword

reactjs