Как получить значение вместо промиса?

Question

[historydev]

Как получить значение вместо промиса? Если я пишу then, реакт выдаёт ошибку мол возвращаю не компонент.

Здесь получаю данные:

export default async function userState() {

    const response = await fetch('http://localhost:4000/isAuth', { method: 'POST' });
    const state = await response.json();

    return state

}

Сюда приходят через компонент:

export default function CreateForm({id, method, action, title, formType, userState}) {

    formType = formType === 1 ? 'authenticate' : formType === 2 ? 'registration' : null;

    userState = userState();

    console.log(userState);

    return !userState ? formType === 'authenticate' ?
        (
            <form action={action} method={method} className='form' id={id}>

                <div className="title">{title}</div>

                <CreateInput id='email' placeholder='E-mail' type='text' />
                <CreateInput id='password' placeholder='Password' type='password' />

                <CreateButton className='authentication-submit' text='Войти' buttonType={null} />

                <li className="form-link"><Link to="register">Регистрация</Link></li>

            </form>
        ) : formType === 'registration' ?
        (
            <form action={action} method={method} className='form' id={id}>

                <div className="title">{title}</div>

                <CreateInput id='name' placeholder='Имя' type='text' />
                <CreateInput id='email' placeholder='E-mail' type='text' />
                <CreateInput id='password' placeholder='Пароль' type='password' />
                <CreateInput id='current-password' placeholder='Повторите пароль' type='password' />

                <CreateButton className='register-submit' text='Регистрация' buttonType={null} />

                <li className="form-link"><Link to="/">Авторизация</Link></li>

            </form>
        ) : null : null

}

Comments

[Сергей Соколов]

const state = await response.json();
здесь await лишний, но проблема не в этом

[hzzzzl]

Сергей Соколов, .json() возвращает промис, тут нужно ждать (он ведь переводит стрим в json)
https://developer.mozilla.org/en-US/docs/Web/API/B...

[Владимир]

hzzzzl, Сергей Соколов все вот это

const response = await fetch('http://localhost:4000/isAuth', { method: 'POST' });
    const state = await response.json();

должно лежать в хуке useEffect и модифицировать стейт

[hzzzzl]

Владимир, я и не спорю, я только про метод .json()

Answer 1

[Владимир]

Это что то не сильно похожее на реакт у вас. Документацию читали?
Если вы пишете функциональный компонент, то почитайте https://reactjs.org/docs/hooks-faq.html#how-can-i-...

https://reactjs.org/docs/thinking-in-react.html
Если в кратце, то
1) Запрос к апи localhost:4000/isAuth нужно выполнить только один раз, во время монтирования компонента
2) Так как fetch - асинхронная функция, то результат напрямую получить не получится, нужно его сохранить в стейт
3) в return предусмотреть возможность вернуть трейтье состояние, когда данные еще не получены.
4) Прочитать доку от корки до корки.

Comments

[historydev]

Пустоту даёт, биндить пытался, видимо спать пора, а то овощ уже, завтра разберусь, хорошего дня)

let state = '';

    this.then(item => state = item.value );

    console.log(state);

[Владимир]

Владимир, https://www.robinwieruch.de/react-hooks-fetch-data
Кусок, который вы привели в коменте не будет работать, читайте про промисы
Еще раз, внимательно прочитайте документацию.