状态

State

前端工程也叫：State、状态管理、组件状态、useState

一句话：组件自己记住、会随用户操作变化的数据，状态一变，页面对应的部分就会自动重新渲染。

详细解释

状态就像比赛的记分牌：分数一变，大屏幕上的数字就跟着变。弹窗是否打开、输入框里写了什么、列表当前第几页、购物车里有几件商品，这些「会变、变了页面要跟着变」的数据就是状态。

React 里常用 useState 声明状态，必须通过它给的更新函数修改，直接改变量页面不会刷新。只在一个组件里用的叫局部状态；多个页面都要用的（如登录用户信息）叫全局状态，常用 Context、Zustand、Pinia 等管理。

和 Props 的区别：Props 是父组件传进来的、只读的；状态是组件自己拥有、可以改的。常见问题是状态放错了地方，导致两处数据不同步。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

在商品页加入购物车后，顶部导航栏的数量角标没有同步更新。请检查购物车状态放在哪里，把它提升为全局状态（项目已有状态管理就沿用，没有就用 React Context），让导航栏和商品页读同一份数据。