React中调用API后useState状态未更新且不重渲染的原因

问题代码 #

组件中的状态与副作用逻辑：

const [name, setName] = useState(null)
useEffect(()=>{
  decryption(Cookies.get("__n")).then(res=>setName(utf8.decode(res)));
},[])

解密接口函数：

export const decryption = async (value) => {
  const response = await axios.post(
    "https://00000",
    JSON.stringify({
      value: value,
    }),
    {
      headers: {
        ....
      },
    }
  );
  if(response.data.status==="DONE"){
    return response.data.result.value;
  }else{
    toast.error("خطایی رخ داده است")
  }
};

可能的原因及解决方法 #

• 解密函数错误分支无返回值，导致setName传入未变化的值
  当接口返回状态不是"DONE"时，decryption函数没有返回值，此时then中的res为undefined，调用utf8.decode(undefined)可能返回和初始状态null相同的结果（比如空字符串或null）。React的useState会浅比较新旧状态，若值未变化则不会触发重渲染。
  解决：给错误分支添加返回值，或在调用setName前判断res是否有效：

  // 方法1：错误分支返回明确值
  export const decryption = async (value) => {
    const response = await axios.post(/* ... */);
    if(response.data.status==="DONE"){
      return response.data.result.value;
    }else{
      toast.error("خطایی رخ داده است");
      return null; // 或其他与初始状态不同的值
    }
  };
  
  // 方法2：在then中判断res再更新
  useEffect(()=>{
    decryption(Cookies.get("__n")).then(res=>{
      if(res !== undefined){
        setName(utf8.decode(res));
      }
    });
  },[])
  

• 新状态值与旧状态值完全相同
  即使接口返回成功，若utf8.decode(res)的结果和当前name状态值一致（比如初始是null，解密后还是null），React也不会触发重渲染。可以在setName前后打印状态值确认：

  useEffect(()=>{
    decryption(Cookies.get("__n")).then(res=>{
      const decodedVal = utf8.decode(res);
      console.log("当前name:", name, "新值:", decodedVal);
      setName(decodedVal);
    });
  },[])
  

• 组件被React.memo包裹且依赖项未正确更新
  如果组件使用了React.memo，需要确保组件的props或内部状态变化能被正确检测到。若name是唯一的状态依赖，可检查memo的比较逻辑是否正确。

• Cookies.get("__n")未获取到有效值
  确认Cookies.get("__n")能拿到正确的加密字符串，否则解密接口可能返回异常，导致setName传入无变化的值。

内容的提问来源于stack exchange，提问作者Faeze Gholami