我有一个按钮和一个输入框,提交输入后,将对searchTerm运行搜索并显示结果表。(),以便仅在searchTerm更改时才运行搜索。()在窗口打开时运行,我添加了一个检查,查看searchTerm是否〉0,以便在窗口打开时不执行搜索。
但是,这样做后,表行不会在第一次搜索时更新,而是在第二次搜索时更新。如果我删除if (searchTerm.length > 0)
检查,表将在第一次搜索时按预期填充(尽管它将立即对空searchTerm运行搜索,这并不理想)。
export const SearchWindow: React.FC<Props> = props => {
const documentationIndexState = useSelector((store: StoreState) => store.documentationIndex);
const dispatch = useDispatch();
const [searchInput, setSearchInput] = React.useState(''); // value inside input box
const [searchTerm, setSearchTerm] = React.useState(''); // term to search (set once search clicked)
React.useEffect(() => {
console.log('in useEffect with searchTerm len: ' + searchTerm.length);
if (searchTerm.length > 0) {
console.log('len > 0, running search');
getSearchResults(props.config, searchTerm, documentationIndexState, dispatch).then(async searchResults => {
const rows = searchResults.map(result => {
return {
cells: {
source: documentationIndexState.headerReference.find(x => x.id === result.id)!.source,
},
};
});
dispatch(setSearchResults(rows));
});
}
}, [searchTerm]); // Only run search if searchTerm changes
return (
<div>
<form>
<input
placeholder='Enter Search Term'
onChange={e => setSearchInput(e.target.value)}
value={searchInput}
/>
<button
onClick={e => {
e.preventDefault();
setSearchTerm(searchInput);
}}
>
Search
</button>
</form>
</div>
<DataTable
rows={documentationIndexState.searchResults}
/>
...
3条答案
按热度按时间m1m5dgzv1#
搜索按钮的回调应该执行搜索。
bnl4lu3b2#
这就是你想要达到的目的吗
flvlnr443#
最后在
getSearchResults()
方法内部添加了一个if (searchTerm.length === 0)
检查,并让它返回[]
if true,而不是在进入搜索方法之前检查len。