Когда новый пользователь посещает страницу, он может ввести имя пользователя, которое хранится в состоянии и в файле cookie. Позже я хочу получить доступ к этому файлу cookie и состоянию, чтобы идентифицировать имя пользователя в игровом сеансе, однако в этот момент они оба пусты, хотя я знаю, что они были установлены (ведение журнала видит значения, имя пользователя правильно отображается в заголовке). Почему это происходит?

 const [cookies, setCookie] = useCookies(["username"]);
const [formerUsername, setFormerUsername] = useState(cookies.username ? cookies.username : null);
...

function handleUsernameChange(username) {
        setCookie("username", username, {path: "/", expires: expirationDate});
        setFormerUsername(username);
        ...
    }
    
useEffect(() => {
        ...
socket.on(TRANSMISSIONS.startGame, data => {
            let playerIndex = data.room.players.indexOf(cookies.username);
            history.push({pathname: "/game", data: {username: cookies.username, room: data.room, playerIndex: playerIndex,
                    }});
        });
  

Индекс проигрывателя равен -1, потому что cookies.username не определено. Я знаю, что оно установлено, потому что я а) вижу файл cookie, б) вижу имя пользователя, загруженное из файла cookie, в заголовке страницы.

Итак, почему здесь оно отображается как неопределенное? То же самое относится и к useState, который показывает начальное значение ( null ), а не фактическое значение…

РЕДАКТИРОВАТЬ: полный код здесь — https://github.com/faire2/loreHunters/blob/master/src/components/loginPage/LoginPage.js

Код находится в режиме реального времени в arnak-dev.herokuapp.com .

Проблемы

1. Устаревшие вложения в обратных вызовах и неуместный массив зависимостей эффекта

    useEffect(() => {
     // extend cookie if it exists
     ...
   
     socket.on(TRANSMISSIONS.startGame, data => {
       let playerIndex = data.room.players.indexOf(cookies.username);
       history.push({
         pathname: "/game",
         data: {
           username: cookies.username, // <-- value when effect ran
           room: data.room,
           playerIndex: playerIndex,
         },
       });
     });
   
     ...
   
     socket.on(TRANSMISSIONS.currentUsersAndData, data => {
       console.log("received actual room and users data");
       if (!shakedHand) { // <-- stale
           setShakedHand(true)
       }
       setUsers(data.users);
       setRooms(data.rooms);
       setRoomIsFull(false);
     }, []) // <-- dependency array
   });
     

2. Доступ к состоянию из неправильного цикла рендеринга

    function handleUsernameChange(username) {
     setCookie("username", username, {path: "/", expires: expirationDate});
     setFormerUsername(username);
   
     if (!formerUsername) { // <-- current formerUsername state
       socket.emit(
         TRANSMISSIONS.handShake,
         cookies.username, // <-- current cookies state
       );
     } else {
       socket.emit(
         TRANSMISSIONS.usernameChanged,
         {
           formerUsername: formerUsername, // <-- current formerUsername state
           newUsername: username, // <-- current username state
         },
       );
     }
   
     setShowCreateUsername(false);
   }
     

Предложения

Я думаю, что эти изменения должны улучшить ваш код, но могут быть некоторые изменения, связанные с зависимостями и условными тестами.

1. Исправьте устаревшее приложение, объявив обратный вызов вне эффекта. Идея здесь onStartGameHandler заключается в том, что определяется каждый цикл рендеринга и включает текущее состояние.

    const onStartGameHandler = data => {
     const playerIndex = data.room.players.indexOf(cookies.username);
     history.push({
       pathname: "/game",
       data: {
         username: cookies.username,
         room: data.room,
         playerIndex: playerIndex,
       },
     });
   };
   
   const onUsersAndDataHandler = data => {
     console.log("received actual room and users data");
     if (!shakedHand) {
       setShakedHand(true)
     }
     setUsers(data.users);
     setRooms(data.rooms);
     setRoomIsFull(false);
   }
   
   useEffect(() => {
     // extend cookie if it exists
     if (cookies.username amp;amp; !shakedHand) { ...
   
     ...
   
     socket.on(TRANSMISSIONS.startGame, onStartGameHandler);
   
     ...
   
     socket.on(TRANSMISSIONS.currentUsersAndData, onUsersAndDataHandler);
   
     // return clean up function
     return () => socket.off(TRANSMISSIONS.startGame);
   }, []);
     

2. Исправьте доступ к состоянию, «реагируя» на обновление состояния в отдельном эффекте, вызываемом обновленными переменными состояния как зависимостями.

    function handleUsernameChange(username) {
     setCookie("username", username, {path: "/", expires: expirationDate});
     setFormerUsername(username);
     setShowCreateUsername(false);
   }
   
   ...
   
   useEffect(() => {
     if (!formerUsername) {
       socket.emit(TRANSMISSIONS.handShake, cookies.username);
     } else {
       socket.emit(
         TRANSMISSIONS.usernameChanged,
         {
           formerUsername: formerUsername,
           newUsername: username,
         },
       );
     }
   }, [cookies, formerUsername, username]);