Отладчик WebStorm видит локальную переменную внутри компонента React как «неопределенную» в точке останова, хотя она имеет значение - PullRequest
Новая
       6

Отладчик WebStorm видит локальную переменную внутри компонента React как «неопределенную» в точке останова, хотя она имеет значение

0 голосов
/ 17 января 2019

Я новичок в использовании отладчика WebStorm - я использую его для пошагового выполнения кода, написанного другим разработчиком, который мне нужно обновить.

Я столкнулся с ситуацией, когда отладчик, когда я делаю паузу в точке останова, показывает локальную переменную внутри компонента React как undefined, хотя он имеет значение. Соответствующий раздел кода таков (я включаю раздел, из которого он взят в конце этой заметки, хотя не полный модуль, так как он слишком большой, чтобы обеспечить контекст): 

      const { isDefault, render } = getRender(key);
      log.setLevel('debug');
      log.debug('render is ', render);
          renderComponent = (
            <FullPieceWrapper isDefault={isDefault}>
              <img src={`${rendersPath}/${key}/${render}.png`} alt="Render" />
            </FullPieceWrapper>
          );

Я установил отладчик для записи значения render в точке останова, которая устанавливается в строке, начинающейся с <img src= (переполнение стека не позволит мне ввести полный HTML). Вывод на консоль следующий: 

render is  deco
Breakpoint reached: Render.jsx:83
undefined

Почему это может происходить? Я предпочел бы полагаться на отладчик, а не на операторы журнала - в частности, я хотел бы иметь возможность навести переменные в коде при наведении курсора на паузу и увидеть их значения: в приведенном выше случае, когда пауза на точке останова в строке 83, a при наведении курсора также отображается render, ошибочно, как undefined.

Любопытно, что когда я присвоил render другой, неиспользованной переменной непосредственно над этим фрагментом кода, отладчик смог увидеть, что render действительно имеет значение .

Спасибо за понимание! Код контекста следующий: 

class Render extends React.Component {
  render() {
    const {
      selected: { type, view: selectedView },
      hovered: { view: hoveredView },
      getRender,
      isFirstStep,
      renders,
    } = this.props;

    const imagesPath = `/images/${isFirstStep ? 'common' : type}`;
    const rendersPath = `${imagesPath}/renders`;

    let renderComponent = null;

    const view = hoveredView || selectedView;

    if (view === 'frontal') {
      const { render } = getRender('frontal');
      renderComponent = (
        <FullPieceWrapper>
          <img src={`${rendersPath}/frontal/${render}.png`} alt="Render" />
        </FullPieceWrapper>
      );
    } else if (renders.length > 1) {
      renderComponent = (
        <PiecesWrapper>
          {renders.map((key) => {
            const { isDefault, isHidden, render } = getRender(key);
            return (
              render ? (
                <Piece
                  key={key}
                  isDefault={isDefault}
                  isHidden={isHidden}
                  src={`${rendersPath}/${key}/${render}.png`}
                />
              ) : null
            );
          })}
        </PiecesWrapper>
      );
    } else if (renders.length === 1) {
      const [key] = renders;
      const { isDefault, render } = getRender(key);
      log.setLevel('debug');
      log.debug('render is ', render);
      renderComponent = (
        <FullPieceWrapper isDefault={isDefault}>
          <img src={`${rendersPath}/${key}/${render}.png`} alt="Render" />
        </FullPieceWrapper>
      );
    } else {
      renderComponent = null;
    }

    return <Wrapper>{renderComponent}</Wrapper>;
  }
}

1 Ответ

0 голосов
/ 18 января 2019

Я предполагаю, что согласно сообщению в блоге Webstorm вам нужно сделать следующее (если вы используете CRA):

Webpack в Create React App создает исходные картытипа дешевый-модуль-источник-карта.Этот вид исходных карт не гарантирует наиболее точного отладочного опыта.Мы рекомендуем использовать devtool: 'source-map'. Чтобы внести изменения в конфигурацию веб-пакета приложения, «извлеките» приложение.

...