javascript - clearTimeout 在 React Native 上不起作用

Question

我设置了一个超时，当用户停止输入 3 秒时，将进行 api 调用并出现 ActivityIndi​​cator。

使用完整代码进行编辑:

import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { ActivityIndicator } from 'react-native';

import {
  Container,
  SearchBar,
  SearchBarInput,
  SearchLoading,
  SearchResultList,
  Product,
} from './styles';

import api from '../../services/api';

export default function Search() {
  const [searchResult, setSearchResult] = useState([]);
  const [searchText, setSearchText] = useState('');
  const [searching, setSearching] = useState(false);
  const [focused, setFocused] = useState(false);

  function renderProduct({ item }) {
    return <Text>Oi</Text>;
  }

  let timer;

  function handleChangeText(text) {
    setSearching(false);
    setSearchText(text);

    clearTimeout(timer);

    timer = setTimeout(() => setSearching(true), 3000);
  }

  useEffect(() => {
    async function search() {
      const response = await api.get(`products?search=${searchText}`);

      setSearchResult(response.data);
      setSearching(false);
    }
    if (searching) {
      search();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searching]);

  return (
    <Container>
      <SearchBar focused={focused}>
        <SearchBarInput
          placeholder="Pesquisar..."
          onChangeText={handleChangeText}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          value={searchText}
        />
        {searching && (
          <SearchLoading>
            <ActivityIndicator size="small" color="#000" />
          </SearchLoading>
        )}
      </SearchBar>
      <SearchResultList
        data={searchResult}
        keyExtractor={item => String(item.id)}
        renderItem={renderProduct}
      />
    </Container>
  );
}

................................................

但它没有按预期工作:

https://user-images.githubusercontent.com/54718471/69919848-14680a00-1460-11ea-9047-250251e42223.gif

Answer 1

请记住，函数的主体在每个渲染上运行。因此，每次组件重新渲染时，对现有计时器的引用都会丢失。

您可以使用 useRef Hook ( https://reactjs.org/docs/hooks-reference.html#useref ) 在渲染之间保持稳定的引用。

const timerRef = useRef(null);

function handleChangeText(text) {
  setSearching(false);
  setSearchText(text);

  clearTimeout(timerRef.current);

  timerRef.current = setTimeout(() => setSearching(true), 3000);
}