React Native中ESLint与Flow报'const'关键字解析错误求助

嘿，我来帮你搞定这个问题！你遇到的两个错误本质上是同一个原因——你在React组件类的主体里直接用const声明变量，这不符合ES6类的语法规范，所以才会触发ESLint和Flow的报错。

问题根源 #

你写的这段代码里，const array = [];直接放在了类的主体中：

export default class Profile extends React.Component {
  state = { checked: false, };
  const array = []; // 这里是错误的位置！
  render() {
    // ...
  }
}

ES6类的主体中只能定义类字段（比如你用的state = {}这种语法）、类方法或者静态成员，不能直接用const/let/var来声明变量，这属于语法错误，所以工具会抛出"解析错误：意外的标记"；而"const只能在.ts文件中使用"的提示是因为TypeScript对类语法有不同的支持，但你当前用的是JS文件，自然不适用。

三种可行的解决方案 #

根据你这个数组的使用场景，选下面其中一种方式就可以解决问题：

1. 把变量放在模块顶层（组件外部）

如果这个数组是所有组件实例共用的、不需要随实例变化，直接放在组件类外面作为模块级变量：

import React from 'react';
import { View } from 'react-native';
import { List, ListItem, CheckBox, Text } from 'react-native-elements';

// 模块顶层声明，所有Profile实例都能访问
const array = [];

export default class Profile extends React.Component {
  state = { checked: false };
  
  render() {
    // 直接使用array即可
    return <View style={{ ... }}>...</View>;
  }
}

2. 用类字段语法声明实例属性

如果这个数组是每个组件实例独有的，或者需要依赖实例的状态/属性，用类字段语法直接赋值（不需要const）：

export default class Profile extends React.Component {
  state = { checked: false };
  // 类字段，每个实例都会拥有自己的array属性
  array = [];
  
  render() {
    // 通过this.array访问
    return <View style={{ ... }}>...</View>;
  }
}

3. 在方法内部声明变量

如果这个数组只在某个方法（比如render）里使用，那就直接在方法内部声明const变量，这是完全合法的：

export default class Profile extends React.Component {
  state = { checked: false };
  
  render() {
    // 方法内部声明，仅在当前方法作用域有效
    const array = [];
    return <View style={{ ... }}>...</View>;
  }
}

内容的提问来源于stack exchange，提问作者james murphy