Kei05
@Kei05

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

制御しないcheckboxの警告が出ないようにしたい

Notion APIから取得したデータでチェックボックスを作っているのですが、このチェックボックスは閲覧者からは変更不可で、記事内に「今、ここまで完了しました」といった表現の際に使用したいです。

return (
    <>
      <label>
        <input type='checkbox' checked={value.checked} />
        タスク
      </label>
      <br />
    </>
  )

ただ、以下のような警告が出てしまいます。
この警告をうまく回避する方法はありますか?

Warning: 
A component is changing an uncontrolled input to be controlled.
This is likely caused by the value changing from undefined to a defined value,
which should not happen.
Decide between using a controlled or uncontrolled input element for the lifetime of the component.
More info: https://reactjs.org/link/controlled-components
0

1Answer

  • 最初のレンダリングのときにはデータが取得されておらず、 value.changed は undefined
  • データ取得が完了すると、 value.changed が true / false になる

ということが起こっているせいだと思います。

checked に undefined を渡したときには input は Uncontrolled として扱われますが、 checked に渡す値が undefined 以外の値のときは Controlled として扱われます。

なので、 以下の2つのいずれかの方法を取ると治ると思います。

  • undefined のときには false に変換する
    • Null 合体演算子を使って checked={value.changed ?? false} と書くことで実現できます。
  • データ取得が完了するまではその input を描画しない
0Like

Comments

  1. @Kei05

    Questioner

    ありがとうございます!
    `checked={value.changed ?? false}`でも同様のエラーが出たので後者の対応で一度検討してみます。

Your answer might help someone💌