React类组件ESLint报filteredItems为未使用state字段错误如何解决

报错产生原因 #

• 读取state的语法错误：React类组件中存储在state内的字段，必须通过this.state.字段名的方式读取。你的代码中直接使用this.filteredItems读取的是组件实例的自定义属性，和你定义在state里的filteredItems没有关联，因此ESLint判定state中的filteredItems从未被使用，抛出unused state fields错误。
• 生命周期调用错误：你在render函数内直接调用setState属于严重违规写法，render是纯渲染函数，每次state更新都会触发render执行，在render内调用setState会导致无限循环渲染的死锁问题。
• 类型不匹配：你在constructor中给filteredItems初始化的是空字符串，后续赋值的是数组，类型不统一会引发后续渲染报错。

修复方法 #

• 修正state初始值，统一字段类型：

constructor(props) {
  super(props);
  this.state = {
    filterText: '',
    filteredItems: [], // 初始值改为和后续赋值一致的空数组
  };
}

• 把state更新逻辑移出render函数，放到对应的生命周期钩子中：如果是组件挂载时就计算过滤结果，放到componentDidMount；如果依赖props传入的数组变化，放到componentDidUpdate监听依赖变化后再更新：

// 组件挂载时计算
componentDidMount() {
  const result = arr1.map(item => item[1]);
  if (result) {
    this.setState({
      filteredItems: result
    });
  }
}

// 若arr1来自props，监听props变化更新
componentDidUpdate(prevProps) {
  if (prevProps.arr1 !== this.props.arr1) {
    const result = this.props.arr1.map(item => item[1]);
    if (result) {
      this.setState({ filteredItems: result });
    }
  }
}

• 修正给DataTable传值的语法，从state中读取字段：

<DataTable
  columns={columns}
  data={this.state.filteredItems} // 从state中读取对应字段
/>

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