如果没有可用的数据，如何从React应用程序中删除空格？

Question

目前，我正在通过API在React中开发一个字典应用程序。在此API中，有些词有同义词，有些没有，反义词和示例也是如此。如果它们可用，我想显示它们，但如果它们不可用，我想显示“数据不可用”。并且还希望显示它们时不留任何空格。有谁可以帮我？这是live link。这是反义词的代码-

    import React from "react";

    const Antonyms = ({ mean }) => {
      return (
        <>
          {mean.map((Val) => {
            return Val.meanings.map((Means) => {
             return Means.definitions.map((Def) => {
               return (
                <>
                 <li className="text-capitalize fs-5 text-start">
                  {Def.antonyms}
                </li>
              </>
            );
          });
        });
      })}
    </>
  );
};

export default Antonyms;

Answer 1

您可以根据Def.synonyms值的存在使用条件渲染，如下所示。如果未定义或为空，则不显示component。

阅读更多关于条件渲染here的内容。

import React from "react";

const Synonyms = ({ mean }) => {
  return (
    <>
      {mean.map((Val) => {
        return Val.meanings.map((Means) => {
          return Means.definitions.map((Def) => {
            return (
              <>
                {Def.synonyms ? (
                  <li className="text-capitalize fs-5 text-start">
                    {`${Def.synonyms}`}
                  </li>
                )}
              </>
            );
          });
        });
      })}
    </>
  );
};

export default Synonyms;

或者您可以按如下方式返回它，以显示“数据不可用”的引号。

            return (
              <>
                <li className="text-capitalize fs-5 text-start">
                  {!Def.synonyms ? `${Def.synonyms}` : "data not available"}
                </li>
              </>
            );