React函数组件报TypeError: setState is not a function如何解决？

排查方案 #

• 首先检查Hooks导入语句
  React 17 新增的自动JSX转换仅免除了import React from 'react'的导入要求，useState、useEffect等Hooks仍需显式导入，需确认组件开头存在以下代码：

  import { useState, useEffect } from 'react';
  

  未正确导入时useState会返回undefined，解构出的状态更新函数不是可调用的函数，就会触发对应报错。
• 检查是否误用类组件的更新方法
  确认代码中没有出现this.setState写法，函数组件不存在this.setState方法，直接调用该语句会直接抛出setState is not a function错误。
• 检查是否违反Hooks调用规则
  所有useState调用必须位于函数组件的顶层，不能被包裹在if条件判断、循环语句、组件外的普通函数中，不符合规则会导致Hooks返回值异常，无法正确拿到更新函数。
• 检查useState返回值的解构顺序
  确认状态变量和更新函数的顺序没有写反，错误示例如下：

  // 错误写法：顺序颠倒，setLoading实际拿到的是布尔类型的初始值
  const [setLoading, loading] = useState(true);
  

  顺序颠倒后你调用的实际是状态本身，自然会抛出「不是函数」的报错。
• 清理依赖缓存重新安装
  若以上步骤均无问题，可尝试清理本地依赖缓存重新安装：

  # Windows系统可手动删除node_modules文件夹和package-lock.json文件后执行npm install
  rm -rf node_modules package-lock.json
  npm install
  

  部分情况下依赖安装异常会导致React内部逻辑执行出错。

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