Вложенная карта React показывает JSX в разработке, но не в производстве - PullRequest
Новая
       176

Вложенная карта React показывает JSX в разработке, но не в производстве

0 голосов
/ 06 августа 2020

Данные, которые я использую, выглядят примерно так:

[ {id: 1, data: [{id: 2, name: 'test1'}, {id: 3, name: 'test1a'}]}, {id: 2, data: [{id: 4, name: 'test2'}, {id: 5, name: 'test2a'}]}, ]

так что это в основном массив объектов, где каждый объект имеет свойство id и name.

Идея состоит в том, чтобы каждый объект отображал строку со всеми элементами внутри поля данных объекта.

Для этого я использую этот компонент: 

const OptionsRow = ({
  options,
  isSelected,
  handleAnswerSelect,
  handleEdit,
  fetchLoading,
}) => {
  const { t } = useTranslation();

  if (!options || !options.length) {
    return (
      <div className="OptionsRow" />
    );
  }

  // eslint-disable-next-line no-console
  console.log(options);

  return (
    <div className="OptionsRow">
      {
        options.map((oArr, i) => {
          // eslint-disable-next-line no-console
          console.log(oArr);
          // it logs this to console in the prod, but it returns nothing - works in development
          return (
            <div key={`option-index-${oArr.id}`}>
              <div className="step-indicator">
                {`${t('Korak')}: ${oArr.id}`}
              </div>
              <div className="Options-row">
                {
                  // eslint-disable-next-line arrow-body-style
                  oArr.data.map(o => {
                    // eslint-disable-next-line no-console
                    console.log(o);
                    // doesnt log this in production
                    return (
                      <OptionItem
                        key={`${o.id} - ${o.name}`}
                        isSelected={!!isSelected(o.id)}
                        value={o}
                        handleSelectClick={() => handleAnswerSelect(o, i)}
                        handleEditClick={() => handleEdit(o)}
                        disabled={fetchLoading}
                      />
                    );
                  })
                }
              </div>
            </div>
          );
        })
      }
    </div>
  );
};

Есть похожие вопросы по StackOverflow, но в большинстве случаев ответом был просто отсутствующий оператор return, который я использую правильно, как мне кажется. Этот компонент работает должным образом на моем локальном сервере разработки, но при развертывании в производственной среде JSX не отображается, последняя выполненная строка из компонента - console.log(oArr);, и журнал оттуда выглядит нормально.

...