React - 输入失去对按键的关注

Posted 2023-02-22

【中文标题】React - 输入失去对按键的关注

【英文标题】：React - input loses focus on keypress

【发布时间】：2020-03-05 19:10:26

【问题描述】：

我的搜索输入组件遇到了一个奇怪的错误，它失去了对每次按键的关注并且无法弄清楚原因。

const App = () => 
  let [characters, setCharacters] = useState([]);
  let [filteredCharacters, setFilteredCharacters] = useState([]);
  // more state
  let [search, setSearch] = useState("");

  useEffect(() => 
    setIsLoading(true);
    axios
      .get(`https://swapi.co/api/people/?page=$pageNumber`)
      .then(res => 
        console.log(res.data.results);
        setCharacters(res.data.results);
        setFilteredCharacters(res.data.results);
      )
      .catch(err => console.error(err))
      .then(() => 
        setIsLoading(false);
      );
  , [pageNumber]);

  function updatePage(e) 
     // update page
  

  function handleSearch(e) 
    setSearch(e.target.value);
    const filtered = characters.filter(character => 
      if (character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1) 
        return character;
      
    );
    setFilteredCharacters(filtered);
  
  function SearchBar() 
    return (
      <React.Fragment>
        <StyledInput
          type="text"
          id="search"
          value=search
          placeholder="Search by name..."
          onChange=e => handleSearch(e)
        />
      </React.Fragment>
    );
  

  return (
    <React.Fragment>
      <GlobalStyles />
      <div className="App">
        <Heading>React Wars!</Heading>
        <SearchBar />
        <Pagination handleClick=updatePage />
        !isLoading && Object.entries(filteredCharacters).length ? (
          <CharacterList characters=filteredCharacters />
        ) : (
          <LoadingBar />
        )
      </div>
    </React.Fragment>
  );
;

我还收到了Line 65:50: Expected to return a value at the end of arrow function array-callback-return 的characters.filter() 行，所以我不知道这是否与此有关。

如果有帮助，可以在此处查看已部署的存在错误的应用程序 --> https://mundane-vacation.surge.sh

【问题讨论】：

在 React 中，如果输入字符在输入时失去焦点，99% 的时间是因为它正在重新渲染。我猜这是因为您将功能组件嵌套在另一个组件中并将它们用作子组件。 SearchBar 的onChange 调用handleSearch，后者调用setSearch，这会更改状态值，从而导致重新渲染（包括重新渲染SearchBar 子本身）。查看类似这样的其他问题，了解如何解决问题：***.com/questions/42573017/…

您在每次渲染时定义function SearchBar() ，因此它是一个全新的组件，每次都会被评估和渲染。您可以省略它并注入StyledInput 内容代替<SearchBar />，这应该会有所帮助

您收到的警告/错误是因为您的 characters 过滤器函子每次都应该返回一个布尔值，而不是函子的当前值。您可以简单地返回该名称的值以进行小写索引检查。

这对我有帮助！因为更明显：***.com/a/59287017/7156690

【参考方案1】：

您的焦点有问题，因为您的组件 SearchBar 是在 App 组件内声明的，并且在每次渲染时都会重新创建它。您需要将SearchBar 移出App 或将StyledInput 移到SearchBar 的位置。如果你选择第一种方式，我建议你从SearchBar中删除React.Fragment，因为它只有一个渲染的孩子：

function SearchBar(props) 
    return (
        <StyledInput
          type="text"
          id="search"
          value=props.value
          placeholder="Search by name..."
          onChange=props.onChange
        />
    );
  

在App:

<SearchBar onChange=handleSearch value=search />

要修复您的警告，您需要始终在 filter 函数中返回一个布尔值。现在，如果character 不满足条件，您将不返回任何内容（即undefined）。所以像这样改变你的filter函数：

const filtered = characters.filter(character => 
    return character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1
);