使用useState的token变量报错，localStorage.getItem("token")却正常的原因咨询

核心原因：useState更新是异步的 #

你遇到的问题本质是React的useState状态更新是异步操作。在你的代码里，调用setToken(localStorage.getItem("token"))之后，token变量并不会立刻更新为新值——它仍然保持初始的空字符串""。这时候执行await loadCartData(token)，相当于把空字符串传给了接口，后端无法验证身份，返回的response.data.cartData很可能是undefined，当你尝试访问它的属性66c1f742ebf65ca0bceabd04时，自然会抛出Cannot read properties of undefined的错误。

而直接传入localStorage.getItem("token")时，你是直接拿到了本地存储里的有效token，接口能正常返回包含cartData的正确数据，所以不会报错。

解决方案 #

如果想基于token状态来调用接口，可以通过以下两种方式处理：

1. 保持现有写法（推荐）
   直接使用localStorage.getItem("token")作为参数调用loadCartData，这种方式简单直接，不需要依赖state更新的时机：

   if(localStorage.getItem("token")){
       setToken(localStorage.getItem("token"));
       await loadCartData(localStorage.getItem("token"));
   }
   

2. 新增依赖于token的useEffect
   如果你必须等待token状态更新后再调用接口，可以添加一个专门监听token变化的useEffect：

   const [token, setToken] = useState("");
   
   useEffect(()=>{
       async function loadData(){
           await fetchFoodList();
           if(localStorage.getItem("token")){
               setToken(localStorage.getItem("token"));
           }
       }
       loadData();
   },[])
   
   // 监听token变化，当token不为空时调用接口
   useEffect(()=>{
       async function fetchCart(){
           if(token){
               await loadCartData(token);
           }
       }
       fetchCart();
   },[token])
   
   const loadCartData = async (token) => {
       const response = await axios.post(url+"/api/cart/get",{}, {headers: {token}})
       setCartItems(response.data.cartData);
   }
   

这样当token状态更新为有效值时，第二个useEffect会自动触发，调用loadCartData时就能拿到正确的token了。

内容的提问来源于stack exchange，提问作者Sandip Basak