React SetStateが即時更新されない仕組みなので、ほかの手段で即時更新する方法をご存知でしょうか

Question

前提・実現したいこと

お世話になっております。初歩的なご質問かもしれず、大変恐縮ではございますが、ご質問させていただきます。

実現したいことは、ボタンをクリックしたときに、Material UIのDrawerを開いて、その中のTextFieldのValueに対して、このコンポーネント内で生成するステートをsetStateで外部のコンポーネントから持ってきたデータを入れて、表示したいのですが、

クリックされてこちらのコンポーネントが最初にレンダリングされるときには、setStateでの更新が反映されず、空欄になってしまいます。（Drawerを閉じて、再度クリックすると、反映されます）

SetStateは仕組み上即時更新されないようですので、他の方法がないか色々試しているのですが、上手くいきません。他の方法で即時に反映させる方法をご存知な方はいらっしゃいますでしょうか。

React, Typescriptで書いております

該当のソースコード

const list = (
  anchor: Anchor, 
  localState:any, 
  setLocalState:any, 
  state:any, 
  setState:any, 
  dispatch: any, 
  ) => (
  <div
    role="presentation"
  >
      <TextField 
        label="Company Name"
        type="text"
        name="potential_name"
        InputProps={{ inputProps: { min: 0, max: 1000 } }}
        InputLabelProps={{
          shrink: true,
        }}
        value={localState.potential_name} // こちらのvalueを最初のレンダリングでも反映させたいと思っております
        onChange={e => setLocalState({ ...localState, potential_name: e.target.value })}/>
  </div>
  )
            
type Anchor = 'top' | 'left' | 'bottom' | 'right';

export default function TemporaryDrawer() {

  const dispatch: AppDispatch = useDispatch()

  const selectedDeal = useSelector(selectSelectedPotentialDeal)

  const [localState, setLocalState] = useState<READ_POTENTIAL_DEAL>({
    id: 0,
    potential_name: '',
    description: '',
  })

  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
  });

  const toggleDrawer = (anchor: Anchor, open: boolean) => 
  (
    event: React.KeyboardEvent | React.MouseEvent,
  ) => 
  {
    
    if (
      event.type === 'keydown' &&
      ((event as React.KeyboardEvent).key === 'Tab' ||
        (event as React.KeyboardEvent).key === 'Shift')
    ) {
      return;
    }
    setState({ ...state, [anchor]: open });
  };

  const clickHandler = (anchor:Anchor) => {

    setLocalState(selectedDeal)　// こちらのsetStateでステートを更新しています
    setState({ ...state, ['right']: true }) // こちらでDrawerを開きます
  }
  
  return (
    
    <div>
      {(['right'] as Anchor[]).map((anchor) => (
        <React.Fragment key={anchor}>
          <Button onClick={() => clickHandler(anchor)} >
            {anchor}
          </Button>
          <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
            {list(anchor, localState, setLocalState, state, setState, dispatch, selectedDeal)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}

Comments

[maisumakun]

> クリックされてこちらのコンポーネントが最初にレンダリングされるときには、setStateでの更新が反映されず、空欄になってしまいます。

どのコンポーネントにどんな値が表示されるはずのものがそうなっていない、ということでしょうか？

[mehul2021]

maisumakunさん、

コメント誠にありがとうございます。

TextFieldの中にある「 value={localState.potential_name}」のvalueに、localStateに格納しているselectedDeal配列のpotential_nameの値が表示されるのですが、最初のレンダリングでは表示されません。

以下の流れでございます
- const selectedDeal = useSelector(selectSelectedPotentialDeal) こちらで外部のコンポーネントから配列をselectedDeal に格納

-const [localState, setLocalState] = useState ... こちらでステートを生成して初期化

- <Button onClick={() => clickHandler(anchor)} のボタンをクリックで、const clickHandler = (anchor:Anchor) => { setLocalState(selectedDeal)　でステートlocalStateを更新しています。
ここで更新したlocalState（中身はselectedDeal ）が表示されるのですが、

最初のこの時点ではステートが更新されないため、TextFieldの中にある「 value={localState.potential_name}」は空欄となります。

setStateは、即時にステート(ここでいうlocalState)を更新しないので、最初のボタンをクリックして1回目のsetLocalState(selectedDeal)では、即時にステートが更新されないので、空欄になってしまいます。

こちらを解決する手段（最初のレンダリングでもlocalStateに更新した情報をいれたい）がないか模索しております。

[maisumakun]

listをコンポーネントではなく単なる関数として扱っていますが、これにはどのような理由がありますか？

[mehul2021]

コメント誠にありがとうございます。

＞listをコンポーネントではなく単なる関数として扱っていますが、これにはどのような理由がありますか？
こちらはMaterial UIのデモコードをできるだけ変えずに使っているためでございます。（特に理由はございません）
listの部分を変更することで、対応できる可能性がございましたら、ご教示いただきたいです。どうぞよろしくお願い致します。

[maisumakun]

すみません、Material UIには詳しくないので、ちょっと追いきれないかもしれないです。

Answer 1

localStateをuseStateで作った後あたりに、こないな三行

  const [localState, setLocalState] = useState<READ_POTENTIAL_DEAL>({
    id: 0,
    potential_name: '',
    description: '',
  })

+  React.useEffect(() => {
+    setLocalState(selectedDeal);
+  }, [selectedDeal]);

を追加してみるといけるんちゃう？ 何かしら変わると思うで。

ただし、これですべての問題が片付くとは思われへん。とゆうのも、質問にあるコードには

{list(anchor, localState, setLocalState, state, setState, dispatch, selectedDeal)}

とあって、list() に7個のパラメータ渡してて、最後のパラメータはselectedDealになっとるけど、list() の定義のほうは

const list = (
  anchor: Anchor, 
  localState:any, 
  setLocalState:any, 
  state:any, 
  setState:any, 
  dispatch: any, 
  ) => (

になっとって、パラメータは6個で、selectedDeal 受け取らんことになっとるゆうことで、まだいろいろ試行錯誤中のコードゆう気がしてるもんでな。

Comments

[mehul2021]

suwmn50799さん、

コメント誠にありがとうございます。
教えて頂いた３行で、上手く解決いたしました！（最初のレンダリングでもステートの値が更新され、valueに反映されました！）

自分の方でもuseEffectで色々試していたのですが、上手くいっておらず、大変助かりました。教えて頂いた３行を参考に再度useEffectの機能を確認したいと思います。アドバイス誠にありがとうございました。