小编use*_*604的帖子

目前我有一个useLazyQuery钩子，它在按下按钮时被触发（搜索表单的一部分）。

钩子行为正常，只有在按下按钮时才会触发。但是，一旦我触发它一次，它就会在每次组件重新渲染时触发（通常是由于状态更改）。

因此，如果我搜索一次，然后编辑搜索字段，结果会立即出现，而且我不必再次单击搜索按钮。

不是我想要的用户界面，如果您完全删除搜索文本（因为它试图将搜索文本null作为变量进行搜索），它会导致错误，有什么方法可以防止useLazyQuery在重新渲染时重新获取？

这可以使用useQuery依赖于“搜索”状态来解决，当我单击按钮时，该状态会被切换。但是，我宁愿看看是否可以避免增加组件的复杂性。

const AddCardSidebar = props => {
  const [searching, toggleSearching] = useState(false);
  const [searchParams, setSearchParams] = useState({
    name: ''
  });
  const [searchResults, setSearchResults] = useState([]);
  const [selectedCard, setSelectedCard] = useState();

  const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
    variables: { searchParams },
    onCompleted() {
      setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
    }
  });

  ...

  return (
    <div>
      <h1>AddCardSidebar</h1>
      <div>
        {searchResults.length !== 0 &&
          searchResults.map(result => {
            return (
              <img
                key={result.scryfall_id}
                src={result.image_uris.small}
                alt={result.name}
                onClick={() => setSelectedCard(result.scryfall_id)}
              /> …