React音乐播放器开发：setIsPlaying不是函数错误求助

问题描述 #

开发仿Spotify的React音乐播放器时，使用React Context实现跨组件状态管理，在Footer组件中调用setIsPlaying时出现错误：

Uncaught TypeError: setIsPlaying is not a function

错误原因 #

代码存在变量名大小写不匹配的问题：

• 在App.js中，useState返回的setter函数命名为setIsplaying（末尾的p为小写）
• 在Footer.js中，解构Context时使用的是setIsPlaying（末尾的P为大写）

这导致解构出来的setIsPlaying为undefined，调用时触发“不是函数”的错误。

修复方案 #

统一变量名的大小写（遵循驼峰命名规范），修改App.js中的setter函数命名：

修改App.js中的useState声明：

// 原代码
const [isPlaying,setIsplaying]=useState(false)
const value = { isPlaying,setIsplaying };

// 修改后
const [isPlaying, setIsPlaying] = useState(false)
const value = { isPlaying, setIsPlaying };

Footer.js中的代码无需修改，保持原有解构即可：

const {isPlaying,setIsPlaying} = useContext(IsPlayingContext)

修改后即可正常调用setIsPlaying修改全局状态。

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