useEffect中调用setProjects提示TypeError:不是函数的问题求助

直接排查以下几个常见问题：

• 检查useState解构顺序
  useState返回的是[状态值, 更新函数]的数组，必须严格按顺序解构，搞反就会把状态值当成函数调用，自然报错。正确写法：

  const [projects, setProjects] = useState([]);
  

  别写成const [setProjects, projects] = useState([])这种反序的。

• 避免异步函数内部重定义同名变量
  如果在useEffect的async函数里声明了和setProjects同名的变量，会覆盖外部的状态更新函数。比如下面这种错误写法：

  useEffect(() => {
    async function fetchData() {
      const setProjects = await someOtherApiCall(); // 这里重定义了setProjects
      const data = await client.fetch('your-project-query');
      setProjects(data); // 这里调用的是内部的变量，不是状态更新函数
    }
    fetchData();
  }, []);
  

  解决：把内部的同名变量改名，比如改成tempSetProjects。

• 确保useState在组件顶层调用
  React Hooks必须在函数组件的顶层调用，不能放在条件判断、循环或者嵌套函数里。比如不能这么写：

  function Projects() {
    if (someCondition) {
      const [projects, setProjects] = useState([]); // 错误：Hooks不能在条件里
    }
    // ...
  }
  

  要把useState放在组件最外层，确保每次渲染都能正确获取到更新函数。

• 检查useEffect的依赖（可选）
  虽然React官方说状态更新函数是稳定的，但如果组件有复杂的嵌套或者自定义Hook，偶尔会因为闭包拿到旧的引用。可以把setProjects加入useEffect的依赖数组试试：

  useEffect(() => {
    async function fetchProjects() {
      const data = await client.fetch('your-query');
      setProjects(data);
    }
    fetchProjects();
  }, [setProjects]);
  

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