React Selectコンポーネントに複数のデフォルト値を設定するには？
aquaReact Selectコンポーネントは、プルダウンメニューのUIコンポーネントです。このReact Selectコンポーネントに、複数のデフォルト値を設定したかったのですが、なぜかうまくいきませんでした。
以下は、React Selectコンポーネントに複数のデフォルト値を設定したのにうまくいかなかった時のサンプルコードです。React Selectコンポーネントを返すだけの簡略化した内容になっています。
useEffect()の中の処理は省略していますが、外部からReact Selectコンポーネントに設定するデータを取得しています。このReact Selectコンポーネントに複数の値をデフォルト値として設定したい場合、isMulti属性を追加し、defaultValue属性にデフォルト値を設定します。
// React Selectコンポーネントを使用したサンプルコード
import Select from 'react-select'
function SampleComponent () {
const [menus, setMenus] = useState([])
const [defaultMenus, setDefaultMenus] = useState([])
useEffect(() => {
// 外部データからデータを取得（コードは省略）
// setMenus()
// setDefaultMenus()
}, [])
return (
// これだけだとうまくいかない
<Select
options={menus}
isMulti
defaultValue={defaultMenus}
/>
)
}色々調べてみた結果、どうやらdefaultValuesの値がまだセットされていないタイミングでコンポーネントが描画されるので、デフォルト値がうまく設定されないようです。
ということで、以下のようにデフォルト値の長さを条件に、つまりlength > 0を条件にしてReact Selectコンポーネントを囲うとうまくいきました。
// 長さの条件を追加
{defaultValues.length > 0 &&
<Select
options={menus}
isMulti
defaultValue={defaultValues}
/>
}参考URL: How to set the 'defaultValue' of 'react-select' multi?
