Почему компонент не видит меню?

Question

[historydev]

Доброе утро. Скажите пожалуйста, почему я не могу перебрать меню которое я вроде как записал в состояние, но оно пусто..

export default function GetNewTender() {

    let [nav, setNav] = useState();

    const getMenu = async() => {

        let menu = await fetch('http://localhost:4000/menu', {method: 'post'});
        menu = await menu.json();

        return menu

    };

    useEffect(() => {
        setNav(getMenu());
    });

    return (
                    <ul className='select'>
                        <li> Выберите тип {nav.toString()}</li>
                        <div className="selectContent">
                            {nav.map(el => (<li onClick={(e) => selectItem(e)} key={el.id}>{el.name}</li>))}
                        </div>
                    </ul>
    )
}

Спасибо.

Answer 1

[Robur]

setNav(getMenu());

запишет туда промис который вернет getMenu. Ждать ваш фетч тут никто не будет

Comments

[historydev]

Я пробовал записать из функции, всё аналогично:

const getMenu = async() => {

        let menu = await fetch('http://localhost:4000/menu', {method: 'post'});
        menu = await menu.json();

        return setNav(menu)

    };

    useEffect(() => {
        getMenu();
    });

[historydev]

Нашёл проблему, но лично я не вижу разницы между

let [nav, setNav] = useState(); /* и */ let [nav, setNav] = useState([]);

Подскажите почему так происходит, обязательно нужно указывать в дефолтное состояние массив или объект? Данные это тоже массив, но на выходе я не получаю массив в массиве, хммм, а как это работает?

[Robur]

Я не очень понимаю о чем вы тут говорите. Дефолтное значение есть всегода, в первом случае это undefined, во втором - пустой массив. Какое вам подойдет, решаете вы, а не реакт.
Если вы делаете `nav.map`, то очевидно что у вас массив должен быть всегда, если вы туда положите undefined оно просто упадет.

Это все никак не связано с вызовом setNav, который у вас как не работал, так и не должен работать. Читайте про промисы, async/await.