useState设置初始状态报错TypeError: setNav is not a function如何解决

问题原因 #

React 提供的useState Hook 返回值为长度为2的数组，数组第一位是状态值，第二位是状态更新函数。你代码中使用了对象解构语法对返回值进行解构，完全不符合useState的返回结构，导致setNav没有被正确赋值，调用时自然会抛出undefined相关的类型错误。

解决方法 #

将对象解构替换为数组解构即可，修改后的代码如下：

const [nav, setNav] = useState(true);
const changeState = () => {
    setNav(false)
};

useEffect(() => {
    changeState();
}, [nav]);

如果需要显式声明状态类型适配TypeScript校验，可以给useState添加泛型约束：

const [nav, setNav] = useState<boolean>(true);

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