Material UIのTextFieldのdefaultValueについて

Question

前提

reactでMaterial UIのTextFieldを使って開発しています。
TextFieldのdefaultValueという属性を使用したいのですが、一方はうまくいっているのに対して、他方はうまくいっておりません。
コードが長すぎるため、必要だと思うところのみコードを載せますので、載せていない部分のコードが必要であれば教えてください。

label="お客様コード" の方のTextField だとdefaultValueを設定できるが、label="担当者"の方のTextFieldのdefaultValueが設定できません。

Material UIのdefaultValueのドキュメントをみると、「Use when the component is not controlled」と書かれているが、それが原因なのでしょうか？よくわからず困っています。

実現したいこと

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

• TextFieldにdefaultValueを設定したい

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

エラーメッセージ

該当のソースコード

import { NohinHeaderContext } from '../../providers/setNohinHeaderProvider';
import { useGetNohinHeaderInfo } from '../../../hooks/useGetNohinheaderInfo';
import {TextField} from '@mui/material';

 const { nohinHeader, setNohinHeader } = useContext(NohinHeaderContext);

 useGetNohinHeaderInfo();

export const test =() =>{

return(
 <TextField variant="standard" label="自社担当者" sx={{ m: 1 }}
  defaultValue={nohinHeader.representative} /> ★
                       
); 
}

import { useContext, useEffect } from "react";
 import {NohinHeaderContext} from '../components/providers/setNohinHeaderProvider';

export const useGetNohinHeaderInfo =() =>{
    
     const {nohinHeader, setNohinHeader}=useContext(NohinHeaderContext);
     let newData = {};
    useEffect(() => {
        fetch('getnohinheaderinfo.php', { method: 'POST', mode: 'cors', credentials: 'include' }
        )
            .then(response => {
                if (!response.ok) {
                    throw new Error(`${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('** fetch: then(data)');
                console.log(data);                               
                newData={indexno:data.index_no,voucherno:data.voucher_no,customerid:data.customer_id,issueddate:data.issued_date,
                    representative:data.representative,taxr:data.tax_r,taxs:data.tax_s,subtotals:data.subtotal_s,subtotalr:data.subtotal_r,
                    taxamounts:data.tax_amount_s,taxamountr:data.tax_amount_r,totalnotax:data.total_notax,taxamount:data.tax_amount,totalamount:data.total_amount}
                 setNohinHeader(newData); 
            })
            .catch((reason) => {
                console.log('** fetch: catch');
                console.log(reason);
            });
    }, []);

    return true;
}

import { createContext, useState } from "react";

export const NohinHeaderContext = createContext({});

export const SetNohinHeaderProvider = props => {
  const { children } = props; 

  const [nohinHeader, setNohinHeader] = useState({      
        indexno:"",voucherno: "", customerid: "", issueddate: "", representative: "", 
        taxr: "",taxs:"",subtotals:"",subtotalr:"",taxamounts:"",taxamountr:"",
        totalnotax:"",taxamount:"",totalamount:"",    
  });

  return (
    <NohinHeaderContext.Provider value={{ nohinHeader, setNohinHeader}}>
      {children}
    </NohinHeaderContext.Provider>
  );

};

試したこと

★のTextFieldに対してdefaultValueではなくvalue={nohinHeader.representative}とするとカスタムフックから取得した値はきちんと取れてきている。

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

"@mui/material": "^5.10.8",
"react": "^18.2.0",

Comments

[yuki23]

なぜ value ではなく defaultValue を設定したいのでしょうか？

[caren]

valueだと値の設定は可能ですが、入力ができない（変更不可）となってしまうからです。defaultValueだと入力ができます。

[yuki23]

「設定できない」とは具体的に何が発生しているのでしょうか？

[caren]

値が何も表示されない状態ということです。エラーはありません。

[yuki23]

const test = nohinHeader["representative"]; //自作のカスタムフックから値を取得
この部分はどこから、どうやって、どのような値が取得されるのでしょうか？
質問文にソースコードを提示してください。

[caren]

コードが長くなってしまいますが、必要そうであるところを載せました。
また、質問の便宜上、最初はlabel="お客様コード" の方のTextFieldとlabel="自社担当者"の方のTextFieldを同じjsx内に記述しましたが、実際のソース上では別のjsxに記載されています。どちらのTextFieldもdefaultValueに設定している値はuseContextでグローバルに管理しているものです。この値は自分が作成したphpにfetchでPOSTを送る形で取得しており、phpは自作のDBにアクセスしてその結果をカスタムフックに返しているという構造になります。nohinHeaderの値自体はデバッグで値が取得できていることは確認済みです。他にも回答のために必要なコードがあれば教えてください。

Answer 1

ご提示のソースを要約すると、問題点は最初に test コンポーネントを描画したときに defaultValue の値は空文字列であるということだと思います。
defaultValue は最初に指定したときの値をコンポーネントの初期値とし、それ以降はコンポーネントが値を制御します。その後に値を変えてもコンポーネントに表示される値は変わりません（それが "not controlled" という言葉の意味です）。つまり、最初に描画したときに空文字列だったなら、それ以降はユーザー操作などがない限りずっと空文字列のままです。

解決策としては、次のどちらかになると思われます。基本的には、複雑なことがしたいなら controlled component にするのが推奨です。

1. defaultValue を使わず value を使う（controlled component として使う）
2. defaultValue が確定するまで test コンポーネントを描画しない

Comments

[caren]

解決策のご提示ありがとうございます。
解決策の1に関しては、value＝{nohinHeader.representative}とし、onChangeでsetNohinHeader を呼び、target.valueを設定すれば、初期値がnohinHeader.representativeで表示され、かつユーザーからの入力を受け付けることが可能であることを試しました。しかし実際はtestコンポーネントには他にも沢山のTextFieldなどがあり、そのすべてにdefaultValueを設定したいため、ユーザーが入力する度にonChangeイベントが発火するのはあまり意味がない気がしています。（onChangeの度に何かしたい処理があれば意味があるとは思うのですが、testコンポーネントは最終的にtestコンポーネント内にあるいくつかのTextFieldに入力された値をサーバーにPOSTするというコンポーネントにしたいと考えているため）

そのため、解決策で提示してくださった2で解決したいと思っているのですが、なぜtestコンポーネントが描画されたときにdefaultValueの値が空なのかがわかっておりません。defaultValueで設定されているnohinHeaderは、testコンポーネント内の useGetNohinHeaderInfo();のタイミングで取得されており、useGetNohinheaderInfo.jsではuseEffectの中でnohinHeaderをセットしています。私の認識ではDBなどから値を取得したいときはuseEffectを使用した方がよいというのをどこかで目にしました。useEffectはtestコンポーネントがすべて描画されてから実行されているため、defaultValueが初期値（つまり空）のままになっているという認識で合っていますか？

[yuki23]

> useEffectはtestコンポーネントがすべて描画されてから実行されているため、defaultValueが初期値（つまり空）のままになっているという認識で合っていますか？
そうです。
useEffect はその中に書いてある処理を後で実行することを予約するだけであって、それを呼んだ時点ではまだ実行されていないし、ましてやfetchが終わるのを待っているわけでもないということです。