变量未定义问题

Posted 2023-03-08

【中文标题】变量未定义问题

【英文标题】：Variable not defined issue

【发布时间】：2017-09-22 14:04:10

【问题描述】：

我尝试下面给出的this example 在普通 js 文件和 reactjs 中使用 for 循环进行循环。

for(var a=[i=0];++i<20;a[i]=i);

当我在反应中运行此代码时，它会显示

'i' 未定义

import React,  Component  from 'react';
import './App.css';
export default class Board extends Component


    move (e)
    
        for(var a=[i=0];++i<20;a[i]=i);
        console.log(a)
    
    render () 
        return (
            <div className="boxes" onClick=this.move.bind(this)></div>
        );
    

当我在普通的 js 文件中运行它时，它工作正常。任何想法为什么会在 reactjs 中发生。

【问题讨论】：

React 没有做任何事情，Webpack 似乎不喜欢这种写代码的方式。这很好，因为这种代码不应该写，因为它很难阅读。

【参考方案1】：

这是因为你的 React 应用程序使用的是严格模式：

"use strict";

for(var a=[i=0];++i<20;a[i]=i);

如果您不想禁用严格模式，您可以通过简单地预先声明 i 变量来解决此问题：

"use strict";

var i;
for(var a=[i=0];++i<20;a[i]=i);

但是，您用来捆绑应用程序的软件很可能无论如何都支持为您缩小文件，所以我不确定您自己缩小文件会有什么好处。例如，如果你使用 Webpack，你可以参考这个问题：How to build minified and uncompressed bundle with webpack?

【参考方案2】：

您的捆绑代码在文件顶部有“严格模式”。如果使用未声明的变量，严格模式将引发错误。

【参考方案3】：

Webpack 正在编译您的代码，并且不允许在未声明的情况下使用变量。 javascript 本身将允许使用未定义的变量。

【讨论】：

这是 webpack，不是 React。

我认为这是与 create-react-app 捆绑在一起的 linter。不一定是 webpack。

@Andrei，webpack 在 babel 运行之前将 eslint 指定为预加载器。代码在这里。 github.com/facebookincubator/create-react-app/blob/v0.9.5/…

当然：错误是由 eslint loader IN webpack 触发的，而不是单独由 webpack 触发的。我正是这个意思。对不起，如果我不够清楚。