nextJs在DOM视图中渲染未转为状态值的localStorage导致报错

报错但不限于如下:

error: hydration failed because the initial ui does not match what was rendered on the server.

Did not expect server HTML to contain a <span> in <div>.

hook.js:608 warning: expected server html to contain a matching <img> in <span>.

Unhandled Runtime Error[](https://nextjs.org/docs/messages/react-hydration-error "Go to related documentation")[](https://nextjs.org/docs/app/building-your-application/configuring/debugging#server-side-code "Learn more about enabling Node.js inspector for server code with Chrome DevTools") Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

问题代码:

"use client"import * as React from "react"export default function Page() {let msg = ""if (typeof window !== 'undefined') {msg = window.localStorage.getItem("msg") ?? ""}return (<><h1>demo page</h1>{msg}</>)
}

正确代码

"use client"
import * as React from "react"export default function Page() {const [msg, setMsg] = React.useState("")React.useEffect(() => {setMsg(window.localStorage.getItem("msg") ?? "")}, [])return (<><h1>demo page</h1>{msg}</>)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/73143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

macOS 安装 Homebrew、nvm 及安装切换 node 版本

一、安装Homebrew 提示&#xff1a;在安装 nvm 时&#xff0c;如果使用 brew 方式安装&#xff0c;就要先安装 Homebrew 1、打开终端&#xff0c;输入以下指令&#xff08;官网可获取最新命令&#xff09;&#xff1a; 国外镜像 /bin/bash -c "$(curl -fsSL https://ra…

海思高安主控芯片兼容编译fastboot流程

华为海思主控芯片有高安和非高安之分&#xff0c;主要是安全性上区别&#xff0c;启动程序不同&#xff0c;一般无法共用。但实际生产中可能出现混料或者同一款产品不同批次一个是高安的一个是非高安的&#xff0c;这时就需要软件上做兼容&#xff0c;实际是高安固件是可以做到…

大模型在甲状腺肿瘤预测及治疗方案制定中的应用研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 1.3 研究方法与数据来源 二、甲状腺肿瘤概述 2.1 甲状腺肿瘤分类及特征 2.2 甲状腺肿瘤的发病率与危害 2.3 现有诊断与治疗手段概述 三、大模型技术原理与应用现状 3.1 大模型的基本原理与架构 3.2 大模型在…

Java学习——day20

文章目录 1. 异常处理与优化1.1 在文件操作中使用 try-catch1.2 try-with-resources 语法1.3 使用 finally 块关闭资源1.4 代码健壮性与优化 2. 实践任务2.1 改进思路2.2 示例改进要点2.3 检查点 3. 总结3.1 改进后的完整代码&#xff1a; 4. 今日生词 今日学习目标&#xff1a…

ajax组件是什么

在 Vue 项目中与后端接口通信&#xff0c;通常有以下几种常用的方式和组件&#xff1a; ### 1. **使用 Axios 进行 HTTP 请求** Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;适用于浏览器和 Node.js 环境。它支持请求和响应拦截、自动转换 JSON 数据、取消请求等功能…

C# WPF 基础知识学习(二)

四、数据绑定 &#xff08;一&#xff09;数据绑定基础 绑定源和目标&#xff1a;数据绑定建立了 UI 元素&#xff08;绑定目标&#xff09;属性与数据源&#xff08;绑定源&#xff09;之间的联系。例如&#xff0c;将一个TextBox的Text属性绑定到一个对象的某个属性上。绑定…

Trae AI IDEA安装与使用

文章目录 背景第一步、下载安装第二步、登录与使用优势异常处理 背景 最近比较热的 Trae 开发工具&#xff0c;在本地下载使用&#xff0c;记录下来。 第一步、下载安装 下载地址&#xff1a;【Trae中文版下载地址】&#xff0c;下载的安装文件名为&#xff1a;【Trae CN-Se…

Ubuntu22.04安装数据

数据库安装步骤&#xff1a; sudo apt-get update sudo apt install mysql-server mysql-client sudo systemctl start mysql sudo systemctl status mysql &#xff08;1&#xff09;在命令行登录 MySQL 数据库&#xff0c;并使用 mysql 数据库 &#xff08;必须使用这个…

【LangChain接入阿里云百炼deepseek】

这是目录 前言阿里云百炼注册账号使用代码执行结果 前言 大模型爆火&#xff0c;现在很多教程在教怎么使用大模型来训练Agent智能体&#xff0c;但是大部分教程都是使用的OpenAI。 最近阿里云推出DeepSeek-R1满血版&#xff0c;新用户可享100万免费Token额度。 今天就教大家怎…

火绒企业版V2.0全面支持Linux与国产化系统!免费试用助力国产化终端安全升级

国产化浪潮下的安全新挑战 随着信创产业的加速推进&#xff0c;国产操作系统&#xff08;统信UOS、麒麟OS等&#xff09;和ARM架构服务器逐步成为政企核心业务的基础设施。然而&#xff0c;针对国产化系统的勒索攻击、网页篡改、供应链漏洞等威胁频发&#xff0c;传统安全方案…

【HarmonyOS Next】鸿蒙加固方案调研和分析

【HarmonyOS Next】鸿蒙加固方案调研和分析 一、前言 根据鸿蒙应用的上架流程&#xff0c;本地构建app文件后&#xff0c;上架到AGC平台&#xff0c;平台会进行解析。根据鸿蒙系统的特殊设置&#xff0c;仿照IOS的生态闭环方案。只能从AGC应用市场下载app进行安装。这样的流程…

【前端拓展】Canvas性能革命!WebGPU + WebAssembly混合渲染方案深度解析

为什么需要混合方案&#xff1f; 真实场景痛点分析&#xff1a; 传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟&#xff08;如SPH流体&#xff09;难以在单线程中实现 技术选型对比&#xff1a; graph LRA[计算密集型任务…

win11编译llama_cpp_python cuda128 RTX30/40/50版本

Geforce 50xx系显卡最低支持cuda128&#xff0c;llama_cpp_python官方源只有cpu版本&#xff0c;没有cuda版本&#xff0c;所以自己基于0.3.5版本源码编译一个RTX 30xx/40xx/50xx版本。 1. 前置条件 1. 访问https://developer.download.nvidia.cn/compute/cuda/12.8.0/local_…

【Python运维】实现高效的自动化备份与恢复:Python脚本从入门到实践

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在信息化时代,数据备份和恢复的有效性对企业和个人来说至关重要。本文将带领读者深入了解如何使用Python编写自动化备份与恢复脚本,确保重…

Electron应用中获取设备唯一ID和系统信息

让我创建一篇关于如何在Electron应用中获取设备唯一ID和系统信息&#xff0c;并在登录时使用这些信息的博客文章。我将确保步骤明确、条理清晰&#xff0c;适合初学者和有经验的开发者。 这篇博客应包含以下部分&#xff1a; 介绍 - 为什么需要获取设备信息前提条件和安装依赖…

【每日学点HarmonyOS Next知识】自定义对话框关闭、WaterFlow嵌套、状态栏颜色、滚动吸附、滚动动效

1、HarmonyOS 自定义对话框自动关闭的问题&#xff1f; 启动页做了个隐私协议弹窗&#xff0c;autoCancel为false。UI中使用 Text() ContainerSpan() Span()组件&#xff0c;设置了点击事件&#xff0c;点击后使用router.pushUrl()的方法跳转到协议页面。点击时&#xff0c;对…

【物联网-WIFI】

物联网-WIFI ■ ESP32-C3-模块简介■ ESP32-C3-■ ESP32-C3-■ WIFI-模组■ WIFI-■ WIFI- ■ ESP32-C3-模块简介 ■ ESP32-C3- ■ ESP32-C3- ■ WIFI-模组 ■ WIFI- ■ WIFI-

Xilinx ZYNQ FSBL解读:LoadBootImage()

篇首 最近突发奇想&#xff0c;Xilinx 的集成开发环境已经很好了&#xff0c;很多必要的代码都直接生成了&#xff0c;这给开发者带来了巨大便利的同时&#xff0c;也让人错过了很多代码的精彩&#xff0c;可能有很多人用了很多年了&#xff0c;都还无法清楚的理解其中过程。博…

LeetCode1871 跳跃游戏VII

LeetCode 跳跃游戏 IV&#xff1a;二进制字符串的跳跃问题 题目描述 给定一个下标从 0 开始的二进制字符串 s 和两个整数 minJump 和 maxJump。初始时&#xff0c;你位于下标 0 处&#xff08;保证该位置为 0&#xff09;。你需要判断是否能到达字符串的最后一个位置&#xf…

Burpsuite使用笔记

Burpsuite使用笔记 抓包设置代理open Browserintercept on输入要抓包的网站回车ForwardHTTP history查看抓包数据其他浏览器配置burpsuite代理浏览器代理器插件配置打开代理同样步骤访问原理三级目录抓包 设置代理 open Browser 打开内置浏览器 intercept on 输入要抓包的网…