如何使用 react-select 5.3.2 在 React17 中設置 select 選項值並掛鈎來自 API 的數據

Question

我正在嘗試從 useState() 設置我的反應選擇的選定值。 我從在 useEffect() 中調用的 API 獲取數據。 我有數據來填充 select 選項，這是下面的“brandOptions”，但在點擊我的 API 之后，我正在嘗試將我設置為從 API 返回的內容 => setSelectedBrandOption({ label: data[0].brandPreference, value: data[ 0].brandPreference})...我錯了什么？ 現在下拉列表沒有改變。

我從 API 返回的數據是這樣的：

data: [
0: { brandPreference: "Huggies", currentSize: 2, firstName: "Roman" }
]

這是我的代碼：

import React, { useState, useContext, useEffect } from 'react';
import Select from 'react-select';
import { UserContext } from '../context/UserContext';
import './Settings.css';

const brandOptions = [
  { value: 'Huggies', label: 'Huggies' },
  { value: 'Kirkland', label: 'Kirkland' },
  { value: 'Pampers', label: 'Pampers' },
  { value: 'Parents', label: "Parent's Choice" },
  { value: 'Up', label: 'Up & Up' },
];

const Settings = () => {
  const [kidsData, setKidsData] = useState([]);
  const { user, setUser } = useContext(UserContext);
  const [selectedBrandOption, setSelectedBrandOption] = useState({}); 

    useEffect(() => {
      const user_ID = user.user._id;
      const url = `/api/kids/${user_ID}`;
      const getKids = async () => {
        try {
          const headers = {
            'Content-Type': 'application/json',
            'x-auth-token': user.jwt,
          };
          const res = await fetch(url, {
            method: 'GET',
            headers: headers,
          });
          const data = await res.json();    
          setKidsData(data)   
          setSelectedBrandOption({
            label: data[0].brandPreference,
            value: data[0].brandPreference,
          });  
        } catch (error) {
          console.log(error)
        }
      }
      getKids(); 
    }, [])
    

  return (      
      <section>                      
            <Select
              onChange={setSelectedBrandOption}
              options={brandOptions}
              placeholder={'Select Brand Preference'}
            />               
       
      </section>     
  );
};

export default Settings;

Answer 1

我會嘗試兩件事：

1- 發出 API 請求后，嘗試在 Select 組件中設置 defaultValue 屬性

2- 切換到使用 AsyncSelect 的異步方法，因為它在以下問題中公開： https://github.com/JedWatson/react-select/issues/2877