【React】TypeError: Assignment to constant variableの対処法

症状

下記ソースを実行したときに、TypeError: Assignment to constant variableが発生してしまいました。 翻訳すると、「TypeError: 定数変数への代入」という内容でした。

エラー

TypeError: Assignment to constant variable

Hoge.jsx

import React, {Fragment, useEffect}  from 'react' ;

export const Hoge = () => {
    const hoge = ""
    useEffect(() => {
      value= "fuga"
    },[]);
    return (
        <Fragment>
            {/* #{hogeList } */}
        </Fragment>
    )
}

解決方法

定数に対して再度値を代入しようとしていたため、起きていたようです。 useEffect内で代入せず、useStateやuseReduverで値を管理するとよさそうです。

Hoge.jsx

import React, {Fragment, useEffect,useState}  from 'react' ;

export const Test = () => {
    const [value, setValue] = useState("initialState")

    useEffect(() => {
    　　setValue("fuga");
    },[]);
    return (
        <Fragment>
            {/* #{value} */}
        </Fragment>
    )
}

参考

https://www.javadrive.jp/javascript/var/index8.html