Javascript TypeError:分配给常量变量。React.js钩子
在对导航栏进行编码时,按钮应将false更改为true,将true更改为false以显示导航菜单,但当我单击它时,会抛出Javascript TypeError:分配给常量变量。React.js钩子,javascript,reactjs,Javascript,Reactjs,在对导航栏进行编码时,按钮应将false更改为true,将true更改为false以显示导航菜单,但当我单击它时,会抛出TypeError:Assignment to constant variable. NavBar.js: import React, { useState } from "react"; import "./navbar.css"; import { FontAwesomeIcon } from "@fortawesome/r
TypeError:Assignment to constant variable.
NavBar.js:
import React, { useState } from "react";
import "./navbar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
const NavBar = (props) => {
const [toggle, setToggle] = useState(false);
return (
<nav className="navbar">
<span className="navbar__home">Iván Méndez</span>
<span className="navbar__link">Acerca de mí</span>
<span className="navbar__link">Proyectos</span>
<span className="navbar__link">Habilidades</span>
<span className="navbar__link">Contactacme</span>
<button
onClick={() => setToggle((toggle = !toggle))}
className="navbar__toggler"
>
<FontAwesomeIcon icon={faBars} />
</button>
</nav>
);
};
export default NavBar;
import React,{useState}来自“React”;
导入“/navbar.css”;
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”;
从“@fortawesome/free solid svg icons”导入{faBars}”;
常量导航栏=(道具)=>{
const[toggle,setToggle]=useState(false);
返回(
伊万·门德斯
Acerca de mí
Proyectos
哈比利达兹
接触顶点
setToggle((toggle=!toggle))}
className=“导航栏切换器”
>
);
};
导出默认导航栏;
Chrome抛出了以下内容:
13 | <span className="navbar__link">Habilidades</span>
14 | <span className="navbar__link">Contactacme</span>
15 | <button
> 16 | onClick={() => setToggle(toggle = !toggle)}
| ^ 17 | className="navbar__toggler"
18 | >
19 | <FontAwesomeIcon icon={faBars} />
13 | Habilidades
14 |联系Acme
15 | 16 | onClick={()=>setToggle(toggle=!toggle)}
|^17 | className=“导航栏切换器”
18 | >
19 |
我一次又一次地阅读react文档,但我误解了一些事情,我想错误是自我描述的。您需要使用setter,而不是直接为state对象赋值 避免这种情况:
toggle = !toggle
将onClick替换为不重新分配:
onClick={() => setToggle(!toggle)}
您可以这样做:
setToggle(prevToggle=>!prevToggle)}
className=“导航栏切换器”
>
您可能想使用arrow=>
而不是赋值运算符:setToggle(toggle=!toggle)
-->setToggle(toggle=>!toggle)我不知道为什么这个问题被解决了!你的回答对我很有帮助,因为我遇到了同样的错误,你告诉我们不要使用toggle=!切换(我正在使用)