前端开发遇到警告信息？别慌，这几个常见情况一招搞定

写完一段 React 组件，控制台突然蹦出一行黄色文字：Warning: Each child in a list should have a unique "key" prop.——你盯着它看了三秒，手悬在键盘上，心里嘀咕：这玩意儿不影响页面显示，先不管？结果第二天测试发现列表错乱了……

警告不是错误，但真会埋雷

前端开发里，警告（warning）不像报错（error）那样直接打断执行，但它不是浏览器在跟你打招呼。它是框架或工具在悄悄提醒：你写的代码虽然能跑，但可能有隐患——比如性能问题、渲染异常，甚至未来某次升级后直接变报错。

React 里最常撞见的几个警告

1. 列表没加 key
比如这样写：

<ul>
  {items.map(item => <li>{item.name}</li>)}
</ul>

React 会立刻警告。解决方法很简单：给每个 li 加上唯一且稳定的 key：

<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

2. 使用已废弃的生命周期方法
比如还在用 componentWillMount，控制台会提示：Warning: componentWillMount has been renamed...。换成 useEffect 或 componentDidMount 就行。

Vue 项目也爱“唠叨”

在 Vue 3 的 Composition API 里，如果忘了用 ref() 或 reactive() 包裹响应式数据，模板里直接写 {{ count }} 却没定义为响应式，控制台就会弹：Reactive variable 'count' is accessed without being defined as reactive.——这时候回头检查 setup() 里是不是漏了 return { count } 或 const count = ref(0)。

Chrome 控制台里的“隐藏警告”

有些警告不显眼，比如字体加载失败时的：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT。看着像网络问题，其实可能是广告拦截插件干的。打开 Chrome 右上角插件图标，临时关掉 uBlock Origin，刷新一下，警告就没了——这类问题不用改代码，但得知道从哪下手。

Webpack/Vite 构建时的警告也不能 ignore

比如 Vite 启动时冒出：Warning: @babel/preset-react is not configured properly. 表面不影响热更新，但后续 JSX 语法升级可能出问题。顺手补一句配置：

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

或者检查 vite.config.ts 里是否漏了 jsx: 'preserve'。

养成随手点开警告的习惯

很多警告右侧带个小箭头，点开能看到具体哪行文件、第几行触发的。别嫌烦——花 10 秒定位，比上线后用户反馈“页面卡顿”再翻三天日志强多了。把浏览器控制台当成你的副驾，不是摆设。