useStateした値を同じ関数内で使いたい

Question

ご覧いただきありがとうございます
reactで割り勘アプリを作成しています

import { createRoot } from 'react-dom/client'
import CalcButton from '../components/CalcButton'
import {Box} from  '@material-ui/core';
import {TextField} from '@material-ui/core';
import { useForm } from "react-hook-form"
import React, { useState } from 'react';

const MultiTop = () => {

type FormData = {
	totalAmount : number;
	leaderNumber : number;
	leaderRate : number;
	memberNumber : number;
	memberRate : number;	
} 

let [collectAmount, setCollect] = useState(0);
let [leaderPay, setLeader] = useState(0);
let [memberPay, setMember] = useState(0);
let [leaderTotal, setLeaderTotal] = useState(0);
let [memberTotal, setMemberTotal] = useState(0);
let [collectTotal , setCollectTotal] = useState(0);

 const { register, handleSubmit } = useForm()

  const onSubmit = (data) => {
  	let standardValue = data.totalAmount / (data.leaderNumber  * data.leaderRate + data.memberNumber * data.memberRate);
  	leaderPay = setLeader(Math.round(standardValue * data.leaderRate/1000)*1000);
  	memberPay = setMember(Math.round(standardValue * data.memberRate/1000)*1000);
  	console.log(leaderPay);
  	leaderTotal = setLeaderTotal(leaderPay * data.leaderNumber);
  	memberTotal = setMemberTotal(memberPay * data.memberNumber);
  	collectTotal = leaderTotal + memberTotal + maleTotal + femaleTotal;
  }

    return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      class="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4"
    >
    	<input placeholder="合計金額" {...register("totalAmount")} />
		<div class="sample3">
			<div class="item">リーダー</div>
				<input placeholder="リーダー人数" {...register("leaderNumber")} />
				<input placeholder="リーダー比率" {...register("leaderRate")} />		
			<div class="item">メンバー</div>
				<input placeholder="メンバー人数" {...register("memberNumber")} />
				<input placeholder="メンバー比率" {...register("memberRate")} />		
      <input type="submit" value="計算する" />
      <div class="item">集金総額</div>
      <div>リーダーの支払額{leaderPay}円 ×  = {leaderTotal}円</div> 
      <div>メンバーの支払額{memberPay}円 × = {memberTotal}円</div>
      <div>集金総額 {collectTotal} 円 </div>
    </form>

    )

}

export default MultiTop

リーダー一人当たりの支払額(leaderPay)から
リーダーの支払い総額(leaderTotal)を算出しようと

  leaderTotal = setLeaderTotal(leaderPay * data.leaderNumber);

の処理を書いたのですがundefinedとなってしまいました。
console.logで確認したところleaderPayもundefinedに
なっていました。useStateした値を同じ関数内で計算に使うことはできないのでしょうか？

Comments

[hoshi-takanori]

できません。useState した値が実際にセットされるのは次の render 時になります。というか、そもそも他の state から計算できる値は state にする必要がありません。

[ttpk]

ありがとうございます。
他のstateから計算できる値はhtml部分で計算して出力するようにしてみます

Answer 1

useStateした値を同じ関数内で計算に使うことはできないのでしょうか？

useStateは非同期の処理なので、不可能です。

• その場で計算して得られる値であれば、もとの値（leaderPay * data.leaderNumber）をそのまま使えばいいだけです。
• useStateへ更新関数を渡す場合は、useEffectで変更後の値を拾う形にしましょう。

---

ところで、onSubmitの中でsetStateしたり、stateの変数を直接書き換えたりと、意味が取れないコードになってしまっています。

Comments

[ttpk]

ありがとうございます。
useEffectを使うようにしてみます