Question

我对此很陌生，所以我希望这是获得帮助的正确地方！

正如标题所示，执行此代码使我在React上出现“太多重新渲染”错误。我尝试遍历所有行并反复检查钩子，但似乎无济于事。

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

UseResults：

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];
}

SearchScreen：

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;

ResultsList：

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;

TIA！

搜索API上的重新渲染次数过多

0 个答案: