将useQuery挂钩从MySearchResults上移到MySearchComponent。在useQuery函数中使用enabled标志，该标志用于阻止查询自动运行：-

const {data} = useQuery(['myquery', props.myEnum,...other search criteria...]
    ,() => fetchMySearchResults(props.myEnun [...other search criteria]),
    {
        enabled: isSearch,
        suspense:true
    }
);

当isSearch设置为true时（点击Search按钮时），查询将执行。当你得到data时，渲染MySearchResults组件，提供data作为属性。
之后，如果您想再次触发搜索功能，可以在搜索按钮的事件处理程序中使用useQuery挂钩提供的refetch函数，如下所示：-

const {data, refetch} = useQuery();
const onSearchClick = (e) => {
  e.preventDefault();
  if(isSearch === true){
    refetch();  
  }else{
    setIsSearch(true);
  }
}

如需完整指涉，请造访：-
https://react-query-v3.tanstack.com/reference/useQuery

使用2 useState：

const [myEnum, setMyEnum] = useState(0);
const [searchEnum, setSearchEnum] = useState();
setIsSearch(true);

    function onChangeMyEnum(myEnumId : number){
        setMyEnum(myEnumId);
    }

<Suspense fallback={<Spinner/>}>
     <MyEnums onChange={onChangeMyEnum} />
</Suspense>

<button className='btn btn-blue' onClick={(e) => {
                e.preventDefault();
                setSearchEnum(myEnum)
                setIsSearch(true);

            }
                }>Search</button>

{
            isSearch === true ?
                <ErrorBoundary FallbackComponent={MyErrorHandler}>
                    <Suspense fallback={<Spinner/>}>
                        <MySearchResults myEnum={searchEnum} [..other search criteria] />
                    </Suspense>
                </ErrorBoundary>
            : <span>&nbsp;</span>
            }

如果你只使用myEnum，每当有人输入一个新值时，它就会触发一个渲染，从而触发你的搜索。如果你通过设置当你点击按钮时触发搜索的值来分离输入和搜索，你的用户可以输入输入，但只有点击才会触发搜索。因为只有点击才会改变搜索所监听的值。

大多数答案是这样的--如果不希望组件重新呈现，就不要用useState（）设置变量，而是使用useRef（）。
因此，现在每个select组件的更改处理程序的定义如下：

const myEnum = useRef(0);
function onChangeMyEnum(myEnumId : number){
    myEnum.current = myEnumId;
}

这是之前我（错误地）调用useState时的样子：

const [myEnum, setMyEnum] = useState(0);
function onChangeMyEnum(myEnumId : number){
    setMyEnum(myEnumId);
}

然后，我将这些变量传递给组件，方法与之前相同：

<div>
    <ErrorBoundary FallbackComponent={MyErrorHandler}>
        <h2>My Search Criteria Select</h2>
        <Suspense fallback={<Spinner/>}>
            <MyEnums onChange={onChangeMyEnum} />
        </Suspense>
    </ErrorBoundary>
</div>

可防止select中的每一个变更都导致元件重新呈现的问题。
按钮单击调用setIsSearch（true），但此状态需要设置为“false”，以便组件在后续按钮单击时重新呈现。为此，请添加对useEffect的调用：

useEffect(() => {
    if(isSearch === true)
    {
        setIsSearch(false);
    }
})

最后一步是将isSearch变量传递到MySearchResults组件中。根据上面的@ZaeemKhaliq答案，我将其添加到了useQuery调用中，这样，除非用户单击了搜索按钮，否则我就不必运行查询了。这是必需的，因为useQuery不能有条件地运行;也就是说，在TemplateSearchResults组件中，我不能简单地在useQuery语句上方放置一个if块，然后在props.isSearch为false时返回。
下面是MySearchResults组件现在的样子：

import  React from 'react';
import { useQuery } from 'react-query';
import TemplateSearchResult from './TemplateSearchResult';

const fetchTemplates = async (carrierGroupId : number, stateId : number, policyTypeId : number, activityStatusCode: string) => {
    let url = `${process.env.REACT_APP_PMSYS_API}/GetTemplates/?carrierGroupId=${carrierGroupId}&stateId=${stateId}&policyTypeId=${policyTypeId}&activityStatusCode=${activityStatusCode}`;
    console.log('fetchTemplates: ' + url)
    const response = await fetch(url);
    return response.json();
}

const TemplateSearchResults = (props : any) => { 
//fyi, you cannot return here if props.IsSearch===false, compiler barks at you. useQuery cannot be called conditionally.

    const {data} = useQuery(['templates', props.carrierGroup,props.state,props.policyType,props.activityStatusCode]
        ,() => fetchTemplates(props.carrierGroup.current,props.state.current,props.policyType.current,props.activityStatusCode.current),
        {
            suspense:true,
            enabled:props.isSearch
        });
       
    return (data === undefined ? <span>No search was done</span> :
        <>
        <table className='table-auto'>
            <thead>
                <tr>
                    <th></th>
                    <th>File Name</th>
                    <th>Groups</th>
                    <th>Types</th>
                    <th>Title</th>
                    <th>Form</th>
                    <th>State</th>
                    <th>Active</th>
                    <th>Required</th>
                    <th>Client Specific</th>
                    <th>Checked Out</th>
                </tr>
            </thead>
            <tbody>
                {data.map((templateSearchResult: {
                    active : boolean ,
                    carrierGroupNumbers: string,
                    checkedOut : string,
                    fileName: string,
                    formType: string,
                    isClientSpecific: boolean,
                    policyTypes: string,
                    required: boolean,
                    stateName: string,
                    templateId:number,
                    title:string}) => <TemplateSearchResult key={templateSearchResult.templateId} 
                        active={templateSearchResult.active} 
                        carrierGroupNumbers={templateSearchResult.carrierGroupNumbers} 
                        checkedOut={templateSearchResult.checkedOut} 
                        fileName={templateSearchResult.fileName} 
                        formType={templateSearchResult.formType} 
                        isClientSpecific={templateSearchResult.isClientSpecific} 
                        policyTypes={templateSearchResult.policyTypes} 
                        required={templateSearchResult.required} 
                        stateName={templateSearchResult.stateName} 
                        templateId={templateSearchResult.templateId} 
                        title={templateSearchResult.title}/>)}
            </tbody>
            </table>
        </>
    );
};

export default TemplateSearchResults;

在我的父搜索页面上，我删除了搜索结果组件呈现周围的“if”块，而是只呈现，传递“isSearch”变量，以便组件可以决定呈现什么：

<div className='w-auto'>
    <ErrorBoundary FallbackComponent={TemplatesErrorHandler}>
        <Suspense fallback={<Spinner/>}>
            <TemplateSearchResults isSearch={isSearch} carrierGroup={carrierGroup} state={state} policyType={policyType} activityStatusCode={activityStatusCode} />
        </Suspense>
    </ErrorBoundary>
</div>

哇。所有这些都让我想起了对核能的旧批评：这是一个非常复杂的生成html的方法。