検索後、スタイルが反映されないので反映させたいです。

Question

検索後、スタイルが期待通りに反映されません。何かアドバイスが欲しいです！

前提

react + Rails APIで開発をしています。

そのなかで現在、検索機能を作っていまして
ユーザーがフォームを送信し検索をしたら、preventDefaultでリロードをせずそのまま、検索結果を表示するようにしています。

フォームの値を処理する部分のコードがこちらです。

export const SearchForm = () => {
//検索ワードを入れる
  const [name, setName] = useState("")
//APIから返ってきた値を入れる
  const [searchedPuas, setPuas] = useState([]);
  const [reviewsAverageSet, setAverage] = useState([]);


  const handleClick = (e) =>{
    e.preventDefault();
    searchPuas({
        name: name
    })
    .then((data) =>{
//APIから返ってきた値をセット
      setPuas(data.searchedPuas);
      setAverage(data.reviewsAverageSet);
    })
  }

  return (
    <Fragment>
    <form>

        <TextField
          label="検索"
          value={name}
          onChange={e => setName(e.target.value)}
        />

          <button type="submit" onClick={(e) => handleClick(e)}>
          送信
          </button>

    </form>
//検索結果をここで表示します。問題のスタイル部分はここのGeneratePuaCardです。下の方に中身の抜粋を載せてます。
    {
      searchedPuas &&
        searchedPuas.map((pua, i) =>

        <GeneratePuaCard
        pua={pua}
        reviewsAverageSet={reviewsAverageSet}
        index={i}
      />
    )
    }

    <Footer/>
    </Fragment>
  )
}
コード

問題

しかし、このやり方ですと値は更新されているのですがスタイルが更新されません。

更新されない部分の抜粋

//値はちゃんと入ってるようです。
          {console.log(`Rating:`,reviewsAverageSet[index])}
          <Rating
            name="read-only"
            value={reviewsAverageSet[index]}
            readOnly
            precision={0.5}
          />

本来なら値の分だけ☆に色が付くのですが、、、

何かいい方法ありましたらご教示頂けると幸いです！よろしくお願いします！

Answer 1

自己解決しました！同じような問題にぶつかった方に参考になったらいいなと思うので以下解決法書きます！

どうやら、フォームには種類があってstateで値を管理できるフォームとできないフォームがあるみたいです。

前者がcontrollで後者がuncontrolledです。

で、基本フォームはデフォルトでcontrollなのですが、フォームの値にnullやundefineが入ってしまうとuncontrolledになってしまい、stateの値が使えなくなってしまいます。

なので、uncontrollになってしまわないようこのようにしたら解決しました！

          <Rating
            name="read-only"
            value={reviewsAverageSet[index] ? reviewsAverageSet[index] : 0}
            readOnly
            precision={0.5}
          />