Блог

Я пытаюсь использовать useState для обновления переменных из хранилища сеансов, затем я хочу отправить запрос api на свой сервер и получить некоторые данные. Все это работает, если я жестко закодирую адрес электронной почты и пароль в запросе api. Но когда я жду, пока программа получит данные, запрос api выполняется до завершения асинхронной функции useState. Я попытался использовать useEffect и ждать, когда пользователь изменится, чтобы функция не запускалась до получения данных, но это бросает меня в бесконечный цикл.

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

 import axios from 'axios';
import Navbar from './Navbar';
import { UserContext } from './UserContext';
import React, { useContext, useState, useEffect } from 'react'
function Watchlist() {

    const [user , setUser] = useState(); 

    const [watchlist, setWatchlist] = useState();

    setUser({
        name: sessionStorage.getItem('sessionName'),
        email: sessionStorage.getItem('sessionEmail'),
        passowrd: sessionStorage.getItem('sessionPassword'),
        authenticated: sessionStorage.getItem('sessionAuthenticated')
    })
    useEffect(() => {
        getWatchlist()
    }, [user])


    function getWatchlist() {

        console.log(`axios.post ${user.email} ${user.password}`);
        axios.post(`/api/users/watchlist/id/${user.email}/${user.password}`).then((res) => {
            if (res) {
                setWatchlist(res.data);
                console.log(JSON.stringify(res.data));
            }
        }).catch((err) => {
            console.log(err);
        })

    }





    return (
        <div>
            <Navbar />
            <div>{JSON.stringify(watchlist)}</div>
        </div>
    )
} export default Watchlist; 
 

Вы никогда не должны вызывать средство обновления состояния безоговорочно. Каждый раз, когда состояние обновляется, компонент будет повторно отображаться, поэтому безусловное обновление состояния всегда будет приводить к бесконечному циклу.

Просто по умолчанию ваш объект состояния с объектом, который вы хотите.

 const [user , setUser] = useState({
  name: sessionStorage.getItem('sessionName'),
  email: sessionStorage.getItem('sessionEmail'),
  passowrd: sessionStorage.getItem('sessionPassword'),
  authenticated: sessionStorage.getItem('sessionAuthenticated')
});