React项目中console.log打印内容重复两次的问题排查

问题复现代码 #

import axios from 'axios';
// 注意：当前代码缺少useState的导入，运行会直接报错，需补充对应导入语句
// import { useState } from 'react';
export default function App() {
  const [searchText ,setSearchText]=useState("");
  console.log(searchText); 

  //api key
  function searchForOrder(){
    //拼接接口请求地址
    var APICall= `http://lookup-app.teflon.order-services.com/orders-lookup/services/v4/orders?orderNo=${searchText}`;
    console.log(APICall)
    //发起接口请求
    axios.get(APICall)
      .then(function (response) {
        //请求成功逻辑
        console.log(JSON.parse(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  return (
    <div className='template'>
      <div className='search'>
          <div className='form-control'>
            <label htmlFor='number'>Search your order Number</label>
            <input
              type='name'
              name='OrderNo'
              id='OrderNo'
              value={searchText}
              onChange={e => setSearchText(e.target.value)}
            />
            <button onClick={searchForOrder} className='submit'>search</button>
          </div>
      </div>
    </div>
  )
}

运行异常表现：控制台所有打印内容都会重复输出两次。

根本原因 #

这是 React 18 及以上版本开发环境下严格模式（Strict Mode）的默认设计行为，不是代码bug。
React 18 开始，开发环境下如果根组件被<React.StrictMode>标签包裹，框架会主动对组件执行「挂载→卸载→重新挂载」的双调用流程，目的是提前检测出代码中不符合React规范的副作用写法、内存泄漏隐患，帮开发者在开发阶段就定位问题。

该双调用行为仅在开发环境生效，项目执行生产构建上线后，不会出现重复执行、重复打印的问题，不影响线上功能。

常见触发场景 #

• 写在组件函数顶层的console.log等同步执行代码，会因为组件双挂载被执行两次
• 没有写清理函数的useEffect副作用，会在开发环境下被执行两次，容易被新手误以为是接口重复请求、逻辑重复触发的bug

处理方案 #

• （推荐）保留严格模式：不用调整入口配置，只需要规范自己的代码写法即可，比如副作用逻辑要写对应的清理函数，不要在组件顶层写会产生副作用的执行逻辑。开发环境的重复打印属于正常校验提示，不用刻意处理。
• （不推荐）关闭严格模式：如果确实不想看到开发环境的双调用提示，可以找到项目入口文件（通常是src/main.jsx/src/main.tsx），移除包裹根组件的<React.StrictMode>标签，修改示例如下：

// 修改前（默认开启严格模式）
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 修改后（关闭严格模式，会丢失开发环境代码校验能力，不建议使用）
root.render(
  <App />
);

额外提示：你贴出的代码中缺少useState的导入语句，直接运行会抛出useState is not defined的错误，需要在文件顶部补充import { useState } from 'react';。

内容的提问来源于stack exchange，提问作者Ankita Prasad