SearchBarのバグ修正

[kagomen]

現状

SearchBar（input）の怪しい実装に、エラーが出た

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 警告: コンポーネントが制御された入力を非制御入力に変更しています。これは、値が定義済みから未定義に変わることが原因である可能性が高く、これは発生すべきではありません。コンポーネントのライフタイム全体を通して、制御された入力要素を使用するか非制御入力要素を使用するかを決定してください。

[kagomen]

React 公式に載ってた: https://ja.react.dev/reference/react-dom/components/input#im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled

“A component is changing an uncontrolled input to be controlled” というエラーが発生する

コンポーネントに value を渡す場合、そのライフサイクル全体を通じて文字列型でなければなりません。 最初に value={undefined} を渡しておき、後で value="some string" を渡すようなことはできません。なぜなら、React はあなたがコンポーネントを非制御コンポーネントと制御されたコンポーネントのどちらにしたいのか分からなくなるからです。制御されたコンポーネントは常に文字列の value を受け取るべきであり、null や undefined であってはいけません。 あなたの value が API や state 変数から来ている場合、それが null や undefined に初期化されているかもしれません。その場合、まず空の文字列（''）にセットするか、value が文字列であることを保証するために value={someValue ?? ''} を渡すようにしてください。 同様に、チェックボックスに checked を渡す場合は、常にブーリアン型であることを確認してください。