Chrome控制台console.log无输出的React代码问题求解

控制台无打印是代码存在两个核心错误导致逻辑根本没执行：

• useEffect 语法完全错误：当前写法useEffect=(() => { ... })是变量赋值操作，不是React Hook的调用语法，包裹的请求逻辑永远不会触发；同时代码未从react包中导入useEffect方法，本身就会触发运行时错误。
• 接口使用了不安全的HTTP协议：若本地开发服务运行在HTTPS协议下，浏览器会默认拦截HTTP请求，就算逻辑执行了请求也发不出去。

1. 先从react导入依赖的useEffect Hook
2. 修正useEffect的调用写法，去掉多余的等号
3. 把API地址改成HTTPS协议，避免混合内容拦截
4. 给异步请求加错误捕获，方便定位请求阶段的异常

修复后可直接运行的完整代码：

import { useEffect } from 'react';

const API_URL = 'https://www.omdbapi.com/?i=tt3896198&apikey=caca2ca6';

const App = () => {
  const searchMovies = async (title) => {
    try {
      const response = await fetch(`${API_URL}&s=${title}`);
      const data = await response.json();
      console.log(data.Search);
    } catch (error) {
      console.error('接口请求异常：', error);
    }
  }

  useEffect(() => {
    searchMovies('Batman');
  }, []); 

  return <h1>Apppi</h1>;
}
  
export default App;

如果改完还是没输出，检查Chrome控制台配置：

• 确认日志过滤没有勾选「Selected context only」，日志级别没有取消Info类别的展示
• 打开Network面板查看omdbapi相关请求状态，若出现CORS报错可以给本地开发服务配置代理转发请求

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