Блог

Главная - Вопросы по программированию - Как удалить пробелы из приложения React, если для него нет доступных данных?

Как удалить пробелы из приложения React, если для него нет доступных данных?

#reactjs #api

Вопрос:

В настоящее время я работаю над словарным приложением в React через API. В этом API некоторые слова имеют синонимы, а некоторые-нет, и то же самое относится к антонимам и примерам. Я хочу отобразить их, если они есть, но если их нет, я хочу отобразить «данные недоступны». А также хотите отобразить их без каких-либо пробелов. Кто-нибудь может мне помочь? Это прямая ссылка. Вот код для антонимов —

     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;

Комментарии:

1. это зависит от фактических данных, которыми вы еще не поделились . Возвращает ли это все слова, включая те, в которых нет никаких анонимов? потому что в настоящее время вы сопоставляете несколько раз. Поэтому было бы неплохо, если бы вы могли поделиться некоторыми образцами данных для каждой карты или исходными данными

Ответ №1:

Вы можете использовать условную визуализацию следующим образом, основываясь на существовании Def.synonyms значения. Если он не определен или равен нулю, то компонент отображаться не будет.

Подробнее об условном рендеринге читайте здесь.

 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>
              </>
            );
Метки: ,