是否可以防止在组件状态更改/重新渲染时重新获取“useLazyQuery”查询？

目前我有一个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)}
              />
            );
          })}
      </div>
      <form>

        ...

        <button type='button' onClick={() => searchCardsQuery()}>
          Search
        </button>
      </form>

      ...

    </div>
  );
};

你不必使用async与阿波罗客户端（你可以，它有效）。但如果你想使用useLazyQuery你只需要传递变量onClick而不是直接在 useLazyQuery 调用上。

对于上面的例子，解决方案是：

function DelayedQuery() {
  const [dog, setDog] = useState(null);
  const [getDogPhoto] = useLazyQuery(GET_DOG_PHOTO, {
    onCompleted: data => setDog(data.dog)
  })

  return (
    <div>
      {dog && <img src={dog.displayImage} />}
      <button
        onClick={() => getDogPhoto({ variables: { breed: 'bulldog' }})}
      >
        Click me!
      </button>
    </div>
  );
}