閉まっている。この質問にはデバッグの詳細が必要です。現在回答を受け付けておりません。
質問を編集して、目的の動作、特定の問題またはエラー、問題の再現に必要な最短のコードを含めます。これは他の人が質問に答えるのに役立ちます。
閉鎖
3 年間前
。
この質問を改善してください
この質問で述べたのと同じパターンに従いましたが、異なる点は、「options」を別のコンポーネントから「props. CountryList」として渡していることです。誰かが「オプション」を小道具として渡すときに何を変更する必要があるのか教えてください。
1
コードサンドボックスを共有してください。そうすれば、一緒に作業できるようになります。同じコードです。
– ベルトディダ
2020 年 9 月 3 日 9:27
@bertdida : これがサンプル コードですandbox : この codesandbox.io/s/charming-snyder-q22gj について助けていただければ幸いです
– シャリンド
2020 年 9 月 3 日 10:45
------------------------
コントローラーのdefaultValue値として空の配列を渡しています - その場合、それをオートコンプリートの値として使用します。また、Autocomplete に defaultValue は必要ないと思います。
とにかく、以下のコードは動作するはずです
export default function AutoSelect({ options, selectedValue }) {
const { control, setValue } = useForm();
if (options.length === 0) {
return null;
}
const defaultValue = options.find((i) => i.value === selectedValue);
return (
<Controller
render={(props) => (
<Autocomplete
options={options}
getOptionLabel={(option) => option.label}
value={props.value}
onChange={(e, values) => setValue("food", values)}
renderInput={(params) => (
<TextField
{...params}
label="Choose food"
name={props.name}
placeholder="Choose food"
variant="outlined"
fullWidth
/>
)}
/>
)}
control={control}
name="food"
defaultValue={defaultValue}
/>
);
}
4
ご説明ありがとうございます。それでもdefaultValueは表示されません。 「オプション」を取得するために別々の 2 つの API を呼び出しています。および「selectedValue」。 selectedValue (defaultValue) が設定される前にオートコンプリート コンポーネントがレンダリングされる可能性がありますか?すでにこれに 1 日を費やしましたが、運が悪かったです :(
– シャリンド
2020 年 9 月 3 日 15:30
1
@shalinds それは奇妙です。問題は親コンポーネントにあると思います。 API 呼び出しをシミュレートするためにコードサンドボックスを更新しました。ぜひチェックしてみてください。
– ベルトディダ
2020 年 9 月 4 日 0:58
親コンポーネントに問題があるようです。 CodeSaを正確にコピーしましたndbox のサンプルを自分のソリューションに貼り付けても、DefaultValue が表示されません。親コンポーネントには、さまざまな API を呼び出す 10 ～ 15 個のサブコンポーネントがあり、データのロードにも時間がかかります。前述したように、AutoComplete コンポーネントは、DefaultValue を設定する前にレンダリングを取得しているようです。
– シャリンド
2020 年 9 月 4 日 2:29
1
はい。そのため、(お気づきかと思いますが) API 呼び出しがまだ解決されていないときに読み込みスピナーをレンダリングしました。これにより、フェッチの進行中に AutoComplete コンポーネントがレンダリングされるのを回避できます。
– ベルディダ
2020 年 9 月 4 日 2:34
