异步搜索中的setState

Question

我试图用异步搜索的结果设置一个有状态的对象，但我遇到了一些错误和奇怪的行为。我正在使用algoliasearch来运行此搜索。这是pseudo中的代码，如果需要，我可以共享完整的代码，但我认为这并不重要。搜索效果很好，我得到了结果(见下面的评论(

const [results, setResults] = useState(null);
index.search(searchQuery, {...requestOptions})
.then(({ hits }) => {
fetchedResultsArray = hits?.map((result) => {
...
return {...}
}
// console.log("fetchedResultsArray", fetchedResultsArray)
setResults(fetchedResultsArray)
).catch

它会导致应用程序表现得很有趣，陷入困境，有时会崩溃。有时我会得到这个(很长的(错误：Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1531":{"module":"NativeAnimatedModule","method":"startAnimatingNode"}...当我注释setResults(fetchedResultsArray)并在它之前取消注释控制台日志时，它会打印结果，应用程序也会正常运行。回到setResults(fetchedResultsArray)，事情又出了问题。我在做错事/违法的事，但怎么办？另一件需要提及的重要事情是，我正在使用Expo SDK 41测试版2。

更新

帕特里克，你指出我做错了什么。让我更深入地向您展示我在SearchScreen中所做的事情，再次缩写为：

const SearchScreen = () => {
// I get the initSearch function from a custom hook and you already see above what the function is.
const [
initSearch,
...
] = useSearch();
// Then I fire the search when the screen loaded
useLayoutEffect(() => {
if (region) {
initSearch({ searchQuery, region, filterOptions, priceOptions });
}
}, [filterOptions, initSearch, priceOptions, region, searchQuery]);
...

我的自定义挂钩是这样的：

export function useSearch() {
const [readyToAnimateAfterSearch, setReadyToAnimateAfterSearch] = useState<boolean>(false);
const [results, setResults] = useState<Result[] | null>(null);
const setAlert = useStore(useCallback((state) => state.setAlert, []));
const setProgressBarVisible = useStore(useCallback((state) => state.setProgressBarVisible, []));
const [radius, setRadius] = useState<number>(0);
const initSearch = useCallback(
async ({ searchQuery, region, filterOptions, priceOptions, loadMore = false }) => {
...
},
[results, setResults, setAlert, setProgressBarVisible]
);
return [
initSearch,
results,
setResults,
radius,
readyToAnimateAfterSearch,
setReadyToAnimateAfterSearch,
] as const;

你能建议一种替代的方法来运行这个作为答案吗。不需要详细说明，只是为了让我了解你将如何处理这件事。非常感谢。

Answer 1

我的主要问题是在initSearch函数中使用results，而不是使用stateUpdater函数并从deps数组中删除results。