React HooksのContextの使い方

Question

前提

React（JavaScript）でログインページのあるwebアプリを作成しようとしています。

Home.jsxはLoginFormというコンポーネントを表示するコンポーネントです。
LoginForm.jsxはログインフォームのあるコンポーネントであり、submitボタンを押すとサーバー側にフォーム情報をPOSTし、DBにアクセスして、ログインしたユーザーのユーザー名を取得するコンポーネントです。（サーバー側の処理は問題ないことを確認済みです）　
しかし、ログインしているユーザー名は他のコンポーネントでも利用したいと思ったので、ログインしているユーザー名をContextで管理しようと思いました。
そこでUserNameProvider.jsxというContext用のコンポーネントを用意しました。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• LoginForm.jsxで取得したユーザー名をHome.jsxで表示させたい

発生している問題・エラーメッセージ

TypeError: "setUserName" is read-only
    at readOnlyError.js:2:9
    at LoginForm.jsx:29:9

該当のソースコード

import {GAccordion} from "../components/GAccordion";
import React, { useState,useContext } from 'react';
import {LoginForm} from "../components/useForm/LoginForm";
import {UserNameContext} from "../components/providers/userNameProvider";

export const Home = () => {

    const {userName,setuserName}=useContext(UserNameContext);
    console.log(userName);
    // const [pageName, changePageName] = useState('home');
    return (
        <>
            <h1>Top Page :pageName :{userName}</h1>
            <GAccordion />
            <LoginForm />
        </>
    );

};

import { useForm } from 'react-hook-form';
import React, { useContext,useEffect } from 'react';
import { Button, Input, Form } from 'semantic-ui-react';
import { UserNameContext } from '../providers/userNameProvider';

export const LoginForm = () => {
  const { userName, setUserName } = useContext(UserNameContext); //context内のuserNameを取得
  const { register, handleSubmit } = useForm();

const onSubmit =  (data) => {
    console.log(data);
    const submitForm = document.querySelector('.login-form');
    const submitData = new FormData(submitForm);
     fetch('http://localhost/MyWeb0711/getuserinfo.php', {
      method: 'POST',
      body: submitData
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`${response.status} ${response.statusText}`);
        }
        return response.text();
      })
      .then((data) => {
        console.log('** fetch: then(data)');
        console.log(data);
        setUserName =(data)=>data;　//ここでエラーが出る
      })
      .catch((reason) => {
        console.log('** fetch: catch');
        console.log(reason);
      });
  }


  return (
    /* handleSubmitはラップした関数にformのdataをオブジェクト形式で渡してくれる
    onSubmitの引数にデータがあるのはそのため。 */
    <form className="login-form" onSubmit={handleSubmit(onSubmit)}>
      <input fluid label='User ID' placeholder='User ID' {...register('userid')} />
      <input fluid label='Password' placeholder='Password' {...register('password')} type="password" />
      <Button type="submit">log in</Button>
    </form>
  );
};

import { createContext,useState } from "react";

export const UserNameContext =createContext({}); //contextを作成

export const UserNameProvider = props => {
    const {children} =props; //propsとしてchildrenを受け取る

    const [userName,setuserName]=useState("context成功"); //userNameをstateとして管理、そのstateの値と更新関数をcontextのvalueに設定する（どこからでもuserNameの参照と更新が可能）

    // providerコンポーネントはvalueというpropsを設定でき、ここにグローバルに管理する値を渡していく
    return (
        <UserNameContext.Provider value={{userName,setuserName}}> 
            {children}
        </UserNameContext.Provider>
    );
};

試したこと

調べてみましたが解決方法がわかりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

setUserName =(data)=>data;　//ここでエラーが出る

エラーメッセージのとおり、この書き方ではsetUserNameの呼び出しではなく、setUserNameへの代入になってしまっています。

Comments

[caren]

setUserNameで、userNameの値を書き換えたいときはどのように記述したらよいのでしょうか？
下記のように記載しましたが同じエラーが出てしまい、どうしたらよいかわからず困っています。
setUserName =(data)=>userName=data;

[maisumakun]

setUserNameを関数として呼んでください。

[caren]

setUserName =(data)=>userName=data;と記載していたところを、
setUserName();と書き換えるということでしょうか？
そうするとTypeError: r is not a functionというエラーが出てしまいます。

[caren]

すみません、解決しましたのでクローズとさせていただきます。
ありがとうございました。