Javascript WebStorm调试器将React组件中的局部变量视为'；未定义'；在断点上，尽管它有一个值

我不熟悉使用WebStorm调试器——我正在使用它逐步完成另一个开发人员编写的需要更新的代码

我遇到过这样一种情况：当我在断点处暂停时，调试器将React组件中的一个局部变量显示为

未定义

，尽管它有一个值。代码的相关部分如下（为了提供上下文，我在本说明末尾包括了它所来自的部分，但不是完整的模块，因为它太大了）：

为什么会发生这种情况？我宁愿依赖调试器而不是日志语句——特别是我希望能够在暂停断点时鼠标悬停代码中的变量并查看它们的值：在上述情况下，当在第83行的断点处暂停时，鼠标悬停还会错误地显示

render

，显示为

未定义的

奇怪的是，当我将
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>;
  }
}

类渲染扩展React.Component{
render（）{
常数{
选定：{类型，视图：selectedView}，
悬停：{view:hoveredView}，
getRender，
这是第一步，
呈现，
}=这是道具；
常量imagesPath=`/images/${isFirstStep？'common'：type}`；
const rendersPath=`${imagesPath}/renders`；
让renderComponent=null；
常量视图=悬停视图| |选定视图；
如果（视图==‘正面’）{
const{render}=getRender（'frontial'）；
renderComponent=(
);
}else if（renders.length>1）{
renderComponent=(
{renders.map（（键）=>{
const{isDefault，ishiden，render}=getRender（key）；
返回(
渲染(
)：null
);
})}
);
}else if（renders.length==1）{
常量[键]=渲染；
const{isDefault，render}=getRender（键）；
log.setLevel（'debug'）；
调试（'render is'，render）；
renderComponent=(
);
}否则{
renderComponent=null；
}
返回{renderComponent}；
}
}
我的猜测是，根据需要，您需要执行以下操作（如果您使用CRA）：

CreateReact应用程序中的Webpack生成廉价模块源映射类型的源映射。这种源代码映射不能保证获得最精确的调试体验。我们建议使用devtool:“源地图”更改应用程序的网页配置，“弹出”应用程序

一定是网页包传输代码的方式有问题。显示问题的完整的、自包含的代码片段将是helpful@lena，我为上下文添加了更多代码，请告诉我是否有更多帮助…无法使用类似的代码重新创建-
render
在调试器中定义。。。显示该问题的示例应用程序将非常有用
render is  deco
Breakpoint reached: Render.jsx:83
undefined

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>;
  }
}