Javascript 搜索API上的重新渲染过多

我是新手，所以我希望这是获得帮助的正确地方

如标题所示，执行此代码会在React上出现“太多重新渲染”错误。 我试着穿过所有的线，反复检查我的钩子，但似乎没有任何效果

我猜这是由于useEffect造成的，因此粘贴以下相关组件的代码：

用户结果：

import { useEffect, useState } from 'react';
import yelp from '../api/yelp';

export default () => {
    const [results, setResults] = useState([]);
    const [errorMessage, setErrorMessage] = useState('');

    const searchApi = async () => {
        try {
            const response = await yelp.get('/search', {
                params: {
                    limit: 50,
                    term,
                    location: 'san francisco'
                }
            });
            setResults(response.data.businesses);
        } catch (err) {
            setErrorMessage('Something went wrong')
        }
    };

    useEffect(() => {
        searchApi('pasta');
    }, []);

    return [searchApi, results, errorMessage];
}

搜索屏幕：

import React, { useState } from 'react';
import { Text, StyleSheet } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import ResultsList from '../components/ResultsList';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';

const SearchScreen = (navigation) => {
    const [term, setTerm] = useState('');
    const [searchApi, results, errorMessage] = useResults();

    const filterResultsByPrice = (price) => {
        return results.filter(result => {
            return result.price === price;
        });
    };

    return <>
        <SearchBar
            term={term}
            onTermChange={setTerm}
            onTermSubmit={searchApi()}
        />
        {errorMessage ? <Text>{errorMessage}</Text> : null}
        <Text>We have found {results.length} results</Text>
        <ScrollView>
            <ResultsList
                results={filterResultsByPrice('$')}
                title="Cost Effective"
                navigation={navigation}
            />
            <ResultsList
                results={filterResultsByPrice('$$')}
                title="Bit Pricier"
                navigation={navigation}
            />
            <ResultsList
                results={filterResultsByPrice('$$$')}
                title="Big Spender"
                navigation={navigation}
            />
        </ScrollView>
    </>
};

const styles = StyleSheet.create({});

export default SearchScreen;

import React，{useState}来自“React”；
从“react native”导入{Text，StyleSheet}；
从“反应本机手势处理程序”导入{ScrollView}；
从“../components/ResultsList”导入ResultsList；
从“../components/SearchBar”导入搜索栏；
从“../hooks/useResults”导入useResults；
const SearchScreen=（导航）=>{
const[term，setTerm]=useState（“”）；
const[searchApi，results，errorMessage]=useResults（）；
const filterResultsByPrice=（价格）=>{
返回results.filter（结果=>{
返回结果。价格===价格；
});
};
返回
{errorMessage？{errorMessage}:null}
我们找到了{results.length}个结果
};
constyles=StyleSheet.create（{}）；
导出默认搜索屏幕；

结果列表：

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import ResultsDetail from './ResultsDetail';

const ResultsList = ({ title, results, navigation }) => {
    return (
        <View style={styles.container} >
            <Text style={styles.title}>{title}</Text>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={results}
                keyExtractor={result => result.id}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity onPress={() => navigation.navigate('ResultsShow')}>
                            <ResultsDetail result={item} />
                        </TouchableOpacity>
                    )
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginLeft: 15,
        marginBottom: 5
    },
    container: {
        marginBottom: 10
    }
});

export default ResultsList;

从“React”导入React；
从“react native”导入{视图、文本、样式表、平面列表}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“/ResultsDetail”导入ResultsDetail；
const ResultsList=（{title，results，navigation}）=>{
返回(
{title}
result.id}
renderItem={（{item}）=>{
返回(
navigation.navigate（'resultshow'）}>
)
}}
/>
);
};
const styles=StyleSheet.create({
标题：{
尺码：18，
fontWeight:'粗体'，
marginLeft:15，
marginBottom:5
},
容器：{
marginBottom:10
}
});
导出默认结果列表；

---

蒂亚

我建议将searchApi放在useEffect的数组中。useffect（（）=>{searchApi（'意大利面'）；}，[searchApi]）；嗨，谢谢你的回复！然而，这并不奏效。这是否意味着每次我尝试运行术语搜索时，useEffect都会使用“意大利面”重新呈现？