为什么useState传入初始值isFollowing=true，返回的状态却为undefined？

问题复现前提 #

你代码中useState传入初始值isFollowing = true，但返回的状态变量followButtonState输出为undefined，对应代码如下：

const [followButtonState, setFollowButtonState] = useState(isFollowing);
console.log(`profile info component: ${isFollowing}`); //output :true
console.log(followButtonState); //output :undefined

可能原因及对应解决方案 #

• 违反Hook调用规则，没有在函数组件顶层调用useState
  React要求所有Hook 必须在函数组件的最顶层执行，不能包裹在条件判断、循环、子函数、useEffect回调、事件处理函数中，违反该规则会导致Hook内部状态对应异常，返回值为undefined。
  解决方法：调整useState的调用位置，放到函数组件所有逻辑的最顶层。
• 组件内存在重复变量声明覆盖了状态值
  如果你在useState调用之后，又写了const followButtonState = xxx、let followButtonState这类重复声明同名变量的代码，会覆盖useState返回的状态值。
  解决方法：全局搜索当前组件内followButtonState的所有出现位置，删除多余的重复声明代码。
• useState引入错误
  如果你拼写错误useState、或者没有从react包正确引入该Hook，也会导致返回值异常。
  解决方法：检查引入语句是否为import { useState } from 'react'，确认拼写无误。
• 多次渲染日志混淆，初始渲染时isFollowing确实为undefined
useState的初始值仅在组件第一次渲染时生效，后续isFollowing的值更新不会自动同步到状态。如果第一次渲染时isFollowing为undefined，此时状态初始化后的值就是undefined，后续isFollowing更新为true时，你看到的isFollowing的log是第二次渲染的输出，两次日志混在一起会让你误以为是同一次渲染的输出。
  解决方法：给初始值设置兜底，或者监听isFollowing的变化同步更新状态：

  // 方法1：给初始值加兜底
  const [followButtonState, setFollowButtonState] = useState(isFollowing ?? true);
  
  // 方法2：监听isFollowing变化同步状态，适用于isFollowing后续会更新的场景
  useEffect(() => {
    setFollowButtonState(isFollowing)
  }, [isFollowing])
  

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