React跨组件点击传参及no-restricted-globals编译错误解决咨询

首先，咱们先搞清楚你遇到的Unexpected use of 'event' no-restricted-globals错误为啥会出现：ESLint的no-restricted-globals规则禁止直接使用全局的event变量——这个全局event是旧DOM API的遗留特性，行为非常不可靠（比如异步操作里它会被重置成别的事件），所以规范里不建议用。

接下来咱们一步步实现需求，同时解决这个错误：

1. 状态提升：在父组件管理搜索状态 #

因为Navbar和Episodes是两个独立组件，最直接的方式是用状态提升，把搜索关键词的状态放在它们的共同父组件（比如App.js）里，再通过props传递数据和回调。

修改Navbar.js：正确处理输入和搜索事件 #

import React, { useState } from 'react';

const Navbar = ({ onSearchTrigger }) => {
  // 用本地state存输入框的值
  const [searchText, setSearchText] = useState('');

  // 处理输入框变化：显式接收事件对象e，不用全局event
  const handleInputChange = (e) => {
    setSearchText(e.target.value);
  };

  // 处理搜索按钮点击：同样接收事件对象，防止默认行为（如果是表单的话）
  const handleSearchClick = (e) => {
    e.preventDefault();
    // 把搜索文本传给父组件的回调函数
    onSearchTrigger(searchText.trim());
  };

  return (
    <nav className="navbar">
      <input
        type="text"
        value={searchText}
        onChange={handleInputChange}
        placeholder="搜索剧集..."
      />
      <button onClick={handleSearchClick}>Search</button>
    </nav>
  );
};

export default Navbar;

修改父组件（比如App.js）：传递状态给Episodes #

import React, { useState } from 'react';
import Navbar from './components/Navbar/Navbar';
import Episodes from './components/Episodes/Episodes';

function App() {
  // 存搜索关键词的全局状态
  const [urlQuery, setUrlQuery] = useState('');

  // 接收Navbar传来的搜索文本，更新状态
  const handleSearch = (query) => {
    setUrlQuery(query);
  };

  return (
    <div className="App">
      <Navbar onSearchTrigger={handleSearch} />
      {/* 把搜索关键词作为props传给Episodes */}
      <Episodes urlQuery={urlQuery} />
    </div>
  );
}

export default App;

修改Episodes.js：用urlQuery调用REST API #

import React, { useEffect, useState } from 'react';

const Episodes = ({ urlQuery }) => {
  const [episodes, setEpisodes] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 当urlQuery变化时，触发API请求
  useEffect(() => {
    const fetchEpisodes = async () => {
      // 空搜索时可以清空结果或加载默认数据
      if (!urlQuery) {
        setEpisodes([]);
        return;
      }

      setLoading(true);
      setError(null);
      try {
        // 注意用encodeURIComponent编码搜索关键词，避免特殊字符报错
        const response = await fetch(`https://your-api-url.com/episodes?search=${encodeURIComponent(urlQuery)}`);
        if (!response.ok) throw new Error('请求失败');
        
        const data = await response.json();
        setEpisodes(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchEpisodes();
  }, [urlQuery]); // 依赖urlQuery，变化时重新请求

  // 加载/错误状态渲染
  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;

  // 渲染剧集列表
  return (
    <div className="episodes-container">
      {episodes.map(episode => (
        <div key={episode.id} className="episode-card">
          <h3>{episode.title}</h3>
          <p>{episode.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Episodes;

额外优化建议 #

• 防抖处理：如果不想用户每输入一个字符就发一次请求，可以给搜索加个防抖（比如延迟300ms再请求），减少API压力。
• 空搜索处理：可以在Episodes里判断urlQuery为空时，加载默认的剧集列表，提升用户体验。
• 表单提交：如果把搜索框和按钮放在<form>标签里，可以监听onSubmit事件，同时支持回车键搜索。

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