Как убрать ошибку и нормальный ли код??

Question

[campus1]

Всем привет.
Мне с бекенда приходит такой объект:

const data = {
  q_lang: {value: 1},
  q_sex: {value: 2},
  q_height: {value: "170cm"}
}

Мне надо отрендерить данные по типу:

Language - English
Sex - Male
Height - 170cm

Как я пробовал решить:
Сделать пресет данных -

const profileTitles = [
  {
    title: "Language of questions",
    key: "q_lang",
    dataByValue: [
      { value: 1, label: "English" },
      { value: 2, label: "Swedish" }
    ]
  },

  {
    title: "Sex",
    key: "q_sex",
    dataByValue: [{ value: 1, label: "Male" }, { value: 2, label: "Female" }]
  },
  { title: "Height", key: "q_height" }
];

И потом ф-цию для рендеринга

renderProfileData = testingReducer => {
    return profileTitles.map((element, index) => {
      const questionValue = get(testingReducer, `${element.key}.value`); // get с lodash
      let labelValue; // нужный нам label для рендеринга
      if (element.hasOwnProperty("dataByValue")) {
        const filteredDataByQuestionValue = element.dataByValue.filter(
          el => el.value === questionValue
        ); // фильтрация по value
        labelValue = filteredDataByQuestionValue[0].label; 
      } else {
        labelValue = questionValue;
      }
      return (
        <div className="profile-data">
          <span>{element.title}</span>
          <span>{labelValue}</span>
        </div>
      );
    });
  };

Вроде все работает, но при первоначальном рендеринге на 2-3 секунды вылетает красное окно с текстом can not read label of undefined, потом все норм рендериться

Вопросы:

1. Как можно исправить первоначальную ошибку?
   
2. Нормальный ли подход я выбрал и читабельная ли функция? TLDR: Норм ли код?:)
   

Answer 1

[Антон Спирин]

Вы усложняете реализацию там, где это не требуется.
Все можно сделать гораздо понятней и проще:

const mapLangTitleByCode = code => ({
  const titles = {
    1: 'English',
    2: 'Russian',
  };
  return titles[code] || 'unknown code';
});

Для пола можно вообще функцию не делать

<div className="profile-data">
  <span>Language</span>
  <span>{mapLangTitleByCode(data.q_lang)}</span>
</div>
<div className="profile-data">
  <span>Sex</span>
  <span>{data.q_sex === 1 ? 'Male' : 'Female'}</span>
</div>

Comments

[campus1]

Антон Спирин , Спасибо, что-то я реально замудрил слишком

В принципе и для language не надо ф-ции))
{data.q_lang === 1 ? 'English' : 'Swedish'}

[campus1]

Антон Спирин , Так лучше?

renderProfileData = testingReducer => {
    const {
      q_age,
      q_lang,
      q_metric,
      q_height,
      q_weight,
      q_sex
    } = testingReducer;
    return (
      <React.Fragment>
        <div className="testing-profile-data">
          <span>Language of questions</span>
          <span>{q_lang.value === 1 ? "English" : "Swedish"}</span>
        </div>
        <div className="testing-profile-data">
          <span>Measurements</span>
          <span>{q_metric.value === 1 ? "Metric" : "U.S. units"}</span>
        </div>
        <div className="testing-profile-data">
          <span>Sex</span>
          <span>{q_sex.value === 1 ? "Male" : "Female"}</span>
        </div>
        <div className="testing-profile-data">
          <span>Age</span>
          <span>{q_age.value}</span>
        </div>
        <div className="testing-profile-data">
          <span>Weight</span>
          <span>{q_weight.value}</span>
        </div>
        <div className="testing-profile-data">
          <span>Height</span>
          <span>{q_height.value}</span>
        </div>
      </React.Fragment>
    );
  };

[Антон Спирин]

campus1, да. можно еще для чистоты вынести результаты вычислений в переменные:

renderProfileData = testingReducer => {
    const {
      q_age,
      q_lang,
      q_metric,
      q_height,
      q_weight,
      q_sex
    } = testingReducer;

    const language = q_lang.value === 1 ? "English" : "Swedish";
    const meansurements = q_metric.value === 1 ? "Metric" : "U.S. units";
    const sex = q_sex.value === 1 ? "Male" : "Female";

    return (
      <React.Fragment>
        <div className="testing-profile-data">
          <span>Language of questions</span>
          <span>{language}</span>
        </div>
        <div className="testing-profile-data">
          <span>Measurements</span>
          <span>{meansurements}</span>
        </div>
        <div className="testing-profile-data">
          <span>Sex</span>
          <span>{sex}</span>
        </div>
        <div className="testing-profile-data">
          <span>Age</span>
          <span>{q_age.value}</span>
        </div>
        <div className="testing-profile-data">
          <span>Weight</span>
          <span>{q_weight.value}</span>
        </div>
        <div className="testing-profile-data">
          <span>Height</span>
          <span>{q_height.value}</span>
        </div>
      </React.Fragment>
    );
  };

Так JSX будет легче восприниматься. А к объявлению переменной при необходимости можно перескочить через ctrl+click в IDE.

[campus1]

Антон Спирин, Большое вам спасибо!