如何使用 react-select 5.3.2 在 React17 中设置 select 选项值并挂钩来自 API 的数据

Question

I am trying to set the selected value of my react-select from useState(). I get my data from a API that I call in useEffect(). I have the data to populate the select options which is 'brandOptions ' below but after hit my API I am trying ty set my to what comes back from API = > setSelectedBrandOption({ label: data[0].brandPreference, value: data[0].brandPreference})... what I am I dong wrong? Right now the dropdown doesn't change.

My data from API comes back like this:

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

Here is my code:

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

I would try two things:

1- Try setting the defaultValue prop in the Select component after the API request is made

2- Switch to an async approach using AsyncSelect as it is exposed in the following issue: https://github.com/JedWatson/react-select/issues/2877