为什么状态不更新

Question

当新用户访问页面时，他们可以填写一个用户名，该用户名存储在 state 和 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 未定义。我知道它已设置，因为我 a) 看到 cookie，b) 在页面标题中看到从 cookie 加载的用户名。

那么为什么这里显示为未定义呢？ useState 也是如此，它显示的是初始值 (null)，而不是实际值...

编辑：完整代码在这里 - https://github.com/faire2/loreHunters/blob/master/src/components/loginPage/LoginPage.js

代码位于 arnak-dev.herokuapp.com。

Answer 1

问题

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 && !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]);