React搜索输入框按键失焦问题及代码报错求助

嘿，我来帮你搞定这两个问题！先拆解那个诡异的失焦Bug，再解决ESLint的报错提示。

一、输入框按键后失焦的原因与修复 #

你遇到的每按一次键就失焦的问题，根源在于**SearchBar组件被定义在了App组件内部**。

每次App组件因状态变化（比如search、filteredCharacters更新）重新渲染时，这个内部的SearchBar都会被重新创建成一个全新的组件。React会将其识别为完全不同的DOM元素，因此会卸载旧的输入框、挂载新的输入框，自然就丢失了焦点。

修复方法：把SearchBar移到App组件外部 #

// 将SearchBar移到App组件外部，避免每次渲染被重新创建
function SearchBar({ search, handleSearch }) {
  return (
    <React.Fragment>
      <StyledInput 
        type="text" 
        id="search" 
        value={search} 
        placeholder="Search by name..." 
        onChange={handleSearch} 
      />
    </React.Fragment>
  );
}

const App = () => { 
  let [characters, setCharacters] = useState([]); 
  let [filteredCharacters, setFilteredCharacters] = useState([]); 
  let [search, setSearch] = useState(""); 
  // ... 其他状态和逻辑

  function handleSearch(e) { 
    // ... 后续修改后的搜索逻辑
  }

  return ( 
    <React.Fragment> 
      <GlobalStyles /> 
      <div className="App"> 
        <Heading>React Wars!</Heading> 
        {/* 传递必要的props给SearchBar */}
        <SearchBar search={search} handleSearch={handleSearch} /> 
        <Pagination handleClick={updatePage} /> 
        {!isLoading && Object.entries(filteredCharacters).length ? ( 
          <CharacterList characters={filteredCharacters} /> 
        ) : ( 
          <LoadingBar /> 
        )} 
      </div> 
    </React.Fragment> 
  ); 
};

这样SearchBar就不会在App每次渲染时被重建，输入框就能稳定保持焦点了。

二、array-callback-return报错的修复 #

这个报错是因为你在characters.filter()的箭头函数中，仅当条件满足时返回了值，否则没有返回任何内容。filter要求回调函数必须返回布尔值，用来判断是否保留当前元素，而非直接返回元素本身。

修复后的handleSearch函数： #

function handleSearch(e) {
  const inputValue = e.target.value.toLowerCase(); // 提前转小写，避免循环内重复转换
  setSearch(inputValue);
  
  const filtered = characters.filter(character => {
    // 直接返回布尔值，符合filter的要求，同时代码更直观
    return character.name.toLowerCase().includes(inputValue);
  });
  
  setFilteredCharacters(filtered);
}

这里还做了个小优化：把输入值提前转成小写，避免在循环中重复调用toLowerCase()，提升了一点性能，同时用includes()替代indexOf() !== -1，代码可读性更强。

这两个问题是独立的，失焦Bug和Filter报错没有直接关联，但都需要修复才能让组件正常工作。

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