割り勘アプリを作成していて、割った金額を人数分表示したいのですが、表示できなくて困ってます（ ; ; ）

Question

現在、Reactで割り勘アプリを作成しており、合計金額を人数で割ったらその人数分liタグを生成し、表示するコードを書いています。
例えば、totalに12000を入力し、pplに3を入力して3人で割ったとします。
すると、計算結果として4000のliタグを3つ生成して表示したいです。
pplに4を入力した場合だと3000のliタグを4つ生成して表示したいです。

ですが、以下のコードで検証してみると、計算するボタンをクリックしても配列personに計算結果perPersonがpushされないです。
一体、なにが原因でpushされないのでしょうか？

解説と共に正常に動くコードを教えていただけますと、幸いです。

何卒、よろしくお願いします。

import { useState } from "react";
import "./App.css";

function App() {
  const [total, setTotal] = useState(""); //合計金額
  const [ppl, setPpl] = useState(""); //人数

  //合計金額入力欄
  const getValueFromTotal = (e) => {
    setTotal(() => e.target.value);
  };
  //人数入力欄
  const getValueFromPpl = (e) => {
    setPpl(() => e.target.value);
  };

  //計算をするボタン押した際に一人当たりの計算
  let person = [];
  const cal = () => {
    let perPerson = total / ppl;

    for (let i = 0; i < ppl; i++) {
      person.push(perPerson);
    }
  };
  console.log(person);

  return (
    <div className="App">
      <input type="number" className="total" onChange={getValueFromTotal} />
      <input type="number" className="ppl" onChange={getValueFromPpl} />
      <button type="button" onClick={cal}>
        計算する
      </button>
      {person &&
        person.map((p, index) => {
          return <li key={index}>{p}</li>;
        })}
    </div>
  );
}

export default App;

Answer 1

ボタン押下後に画面描画が実行されるためには、Reactに「何らかの変化があった事」が伝わらないといけません。たとえば、useStateを使うと、stateに変化があった事がReactに伝わるので、App関数が再実行されます。totalとpplはsetStateしているので、テキストボックスに文字を打つたび、App関数は再実行されています。同じように、personもcal関数の中でsetStateすることで、Reactに変化を伝えることができます。

ただ、まず計算処理が間違っているのでそこを直します。

    /* これだと4000個のliが出来ます。
    for (let i = 0; i < ppl; i++) {
      person.push(perPerson);
    }
    */
    for (let i = 0; i < perPerson; i++) {
      person.push(ppl);
    }

App関数の最初に、person用のuseStateを書きます。

function App() {
  const [total, setTotal] = useState(""); //合計金額
  const [ppl, setPpl] = useState(""); //人数
  const [person, setPerson] = useState([]);   // 追加

cal関数の最後にpersonをsetStateします。

  //計算をするボタン押した際に一人当たりの計算
  // let person = [];   ←削除
  const cal = () => {
    let perPerson = total / ppl;

    for (let i = 0; i < perPerson; i++) {
      person.push(ppl);
    }
    setPerson([...person]);  // 追加
  };

注意なのが、personはListなんですが、Listは中身が変わってもReactは変化に気付きません。
List自体のインスタンスは変化しないからです。なので、新たにリストを作り、元のpersonをコピーして作り直したものをsetします。[...person]の...はスプレッド構文というもので、リストの中身を展開しています。

これで動きます。

Comments

[hoshi-takanori]

person 配列は一部変更ではなく全部作り直しなので、スプレッド構文は不要で、let person = []; を cal の中に入れて、cal の最後で setPerson(person); すればいいはず。

[umau]

>hoshi-takanoriさん
ありがとうございます。要は配列自体を新規で作る事がキモなので、cal関数のローカルで新規に配列作ればそのままset出来るのはおっしゃる通りです。ただ、これは単に書き方としての問題にはなりますが、まずuseStateの定義は普通、

const [person, setPerson] = useState([]);

こう書くと思いますが、personという名前がシャドーイングしないよう、ローカルは別名付けることになり、変数増やしたくないので面倒だなと。

公式の解説含め、スプレッド構文使って配列展開する書き方が一般的（そうでない解説を私は見た事が無いです）で、これで覚えておいた方が事故らずに済むんじゃないかと思います。

[lep-kop]

無事解決できました！！！
ずっとつまづいてたので本当に助かりました。
ありがとうございました????‍♀️