Хук useState не инициализируется с правильным значением: Array

Question

Я передаю массив 'defaults' в компонент панели и затем пытаюсь установить хук состояния 'selected option' равным ему. По какой-то причине ловушка устанавливает пустой массив.

компонент:

const Panel = ({ title, inputs, datepicker, identifiers, apiBase, isins, defaults = [], notes = "" }) => {
    const [expand, setExpand] = useState(false);
    const [date, setDate] = useState(new Date());
    const [selectedOption, setSelectedOption] = useState([...defaults]);
    const [dataError, setDataError] = useState(false);
    const [errorMsg, setErrorMsg] = useState('');
    const [errorCheckLoading, setErrorCheckLoading] = useState(false);

    const toggleExpand = () => {
        setExpand(!expand);
        console.log(defaults);
        console.log(selectedOption);
    };

Только для тестирования, у меня есть пара консольных журналов в моей функции расширения переключения, чтобы я мог проверить данные переданы в набор данных.

Вывод из журналов консоли:

>(48) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
>[]

Итак, я знаю, что данные приходят нормально, просто они не попадают в ловушку.

Я также попытался задать хуку начальные значения по умолчанию и [по умолчанию].

Теперь рисуем пробел - есть идеи?

Редактировать: это родительский компонент с настройками по умолчанию:

const Parent = () => {

    const [all, setAll] = useState([]);
    const [allLoadFailed, setAllLoadFailed] = useState(false);

    const [defaults, setDefaults] = useState([]);
    const [defaultsLoadFailed, setDefaultsLoadFailed] = useState(false);

    useEffect(() => { loadData()}, []);
    useEffect(() => { loadDefaultData()}, []);

    const loadDefaultData = async () => {
        try {
            let defaultData = await GetDefaults();
            setDefaults(defaultData.map(item => item = {value: item, label: item}));
        } catch (_) {
            setDefaultsLoadFailed(true);
        }
    };

    const loadData = async () => {
        try {
            let iData = await GetAll();
            let filteredIData = iData.filter(item => item);
            setAll(filteredIData.map(item => item = {value: item, label: item}));
        } catch (_) {
            setAllLoadFailed(true);
        }
    };


    return (

            <Panel
                title="Test"
                isins={all}
                defaults={defaults}
                inputs
                datepicker
                identifiers
                apiBase=""
                notes="not yet complete"
                key="2"
            />
    );

Answer 1

Я предполагаю, что defaults - это значение из вызова API?

Это происходит потому, что при начальном рендеринге defaults = [] и первый параметр useState получают только начальное значение, поэтому когда default изменяется на правильные данные во втором рендере, useState уже имеет значение [].

Что вам нужно сделать, это использовать useEffect ловушку, когда defaults изменить и установить selectedOption.

useEffect(() => {
    setSelectedOption([...defaults])       
}, [defaults, setSelectedOption])

Answer 2

Проверьте вашу деструктуризацию, вы устанавливаете значение по умолчанию defaults = []. Сначала будет отображаться только пустой массив, а затем компонент завершит монтирование. Возможно, вы захотите использовать useEffect ловушку для проверки новых обновлений, а затем установите setSelectedOption(defaults) там следующим образом:

useEffect(() => {
   setSelectedOption(defaults)
}, [defaults])