использование классов и рендеринг API-вызовов в React Native - PullRequest
Новая
       8

использование классов и рендеринг API-вызовов в React Native

1 голос
/ 30 апреля 2020

Я новичок в React Native, у меня проблема с рендерингом данных из вызова API. Когда я делаю это внутри функции, она работает для меня, когда я использую useEffect ... но в классе я не могу это использовать.

Вот пример моего кода ... 

export default class Categories extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            error: null,
        };
    }
    componentDidMount() {
        this.regionsGetRequest();
    }
    regionsGetRequest = () => {
        this.setState({ loading: true });

        const fetchData = async () => {
            const result = await axios(
                'https://...........json'
            );
            this.setState({
                data: result.data,
                error: result.error || null,
                loading: false,
            });

        };
        fetchData();
    };

    renderCategories = () => {
        const categoryLive = this.state.data;
        console.log(JSON.stringify(categoryLive));

Я получаю в консоли: undefined, undefined ... и затем результаты, как они должны ... как будто он работает 3 раз по какой-то причине ... если я пытаюсь поставить выше renderCategories: 

componentDidMount() {
        renderCategories();
    }

Я получаю только одно неопределенное ... когда я подключаю переменную categoryLive, ничего не загружается.

Извините, я боролся с этим ... любая помощь очень ценится !!

Независимо от того, что я делаю, я всегда получаю 3 вызова ... первые два пустых объекта [], и в-третьих, я получаю реальные результаты, выгружаемые в консоль. Так что мои категории не отображаются ... они пусты.

Вот обновленный код, и я выкладываю целый файл, он может звонить в колокола. 

export default class Categories extends React.Component {
    state = {
        myData: [],
    };
    componentDidMount() {
        axios
            .get('https://..............json')
            .then((res) => {
                const myData = res.data;
                this.setState({ myData });
            });
    }

    renderCategories = () => {
        const categoryLive = this.state.myData;
        console.log(JSON.stringify(categoryLive));

        const { navigation, route } = this.props;
        const tabId = route.params?.tabId;
        const categories = tabId
            ? categoryLive[tabId]
            : categoryLive.victoria_bc;
        //console.log(route.params?.tabId);
        return (
            <ScrollView
                showsVerticalScrollIndicator={false}
                contentContainerStyle={styles.categoryList}
            >
                <Block flex>
                    {categories.map((category) => (
                        <TouchableWithoutFeedback
                            key={`category-${category.id}`}
                            onPress={() => navigation.navigate('Category', { ...category })}
                        >
                            <Block flex card style={[styles.category, styles.shadow]}>
                                <ImageBackground
                                    source={{ uri: category.image }}
                                    style={[
                                        styles.imageBlock,
                                        { width: width - theme.SIZES.BASE * 2, height: 252 },
                                    ]}
                                    imageStyle={{
                                        width: width - theme.SIZES.BASE * 2,
                                        height: 252,
                                    }}
                                >
                                    <Block style={styles.categoryTitle}>
                                        <Text size={18} bold color={theme.COLORS.WHITE}>
                                            {category.title}
                                        </Text>
                                    </Block>
                                </ImageBackground>
                            </Block>
                        </TouchableWithoutFeedback>
                    ))}
                </Block>
            </ScrollView>
        );
    };

    render() {
        return (
            <Block flex center style={styles.categories}>
                {this.renderCategories()}
            </Block>
        );
    }
}

Когда я говорю это так: я получаю категорию по умолчанию (и все данные просто отлично ...), но моя навигация больше не работает ... (route.params? .TabId is не обновляется) 

axios
    .get('https://.............json')
    .then((res) => {
        this.setState({
            myData: res.data,
                error: res.error || null,
                loading: false,
            });
            console.log('inside .then----' + JSON.stringify(this.state.myData));
            const { navigation, route } = this.props;
            const tabId = route.params?.tabId;
            const tmpCategories = tabId
                ? this.state.myData[tabId]
                : this.state.myData.victoria_bc;
            this.setState({ categories: tmpCategories });
            //console.log(route.params?.tabId);
        });

Если я скажу так, как показано ниже ... категория для меня пуста: 

axios
    .get('https://.............json')
    .then((res) => {
        this.setState({
            myData: res.data,
                error: res.error || null,
                loading: false,
            });
            console.log('inside .then----' + JSON.stringify(this.state.myData));

        });
        const { navigation, route } = this.props;
        const tabId = route.params?.tabId;
        const tmpCategories = tabId
            ? this.state.myData[tabId]
            : this.state.myData.victoria_bc;
        this.setState({ categories: tmpCategories });
        //console.log(route.params?.tabId);

Окончательный код, который работает для меня .. 

export default class Categories extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            myData: [],
            error: null,
        };
    }

    componentDidMount() {
        this.renderCategories();
    }

    renderCategories = () => {
        axios
            .get('https://.............json')
            .then((res) => {
                this.setState({
                    myData: res.data,
                    error: res.error || null,
                    loading: false,
                });
                //console.log('inside .then----' + JSON.stringify(this.state.myData));
            });
    };

    render() {
        if (this.state.loading) {
            return (
                <View
                    style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                >
                    <ActivityIndicator />
                </View>
            );
        } else {
            const { navigation, route } = this.props;
            const tabId = route.params?.tabId;
            const categories = tabId
                ? this.state.myData[tabId]
                : this.state.myData.victoria_bc;

            //console.log(route.params?.tabId);


            return (
                <Block flex center style={styles.categories}>
                    <ScrollView
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={styles.categoryList}
                    >
                        <Block flex>
                            {categories.map((category) => (
                                <TouchableWithoutFeedback
                                    key={`category-${category.id}`}
                                    onPress={() =>
                                        navigation.navigate('Category', { ...category })
                                    }
                                >
                                    <Block flex card style={[styles.category, styles.shadow]}>
                                        <ImageBackground
                                            source={{ uri: category.image }}
                                            style={[
                                                styles.imageBlock,
                                                { width: width - theme.SIZES.BASE * 2, height: 252 },
                                            ]}
                                            imageStyle={{
                                                width: width - theme.SIZES.BASE * 2,
                                                height: 252,
                                            }}
                                        >
                                            <Block style={styles.categoryTitle}>
                                                <Text size={18} bold color={theme.COLORS.WHITE}>
                                                    {category.title}
                                                </Text>
                                            </Block>
                                        </ImageBackground>
                                    </Block>
                                </TouchableWithoutFeedback>
                            ))}
                        </Block>
                    </ScrollView>
                </Block>
            );
        }
    }
}

1 Ответ

0 голосов
/ 30 апреля 2020 
export default class Categories extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      loading: false,
      myData: [],
      error: null,
      categories: []
    };


  }

    componentDidMount() {
    renderCategories();
    }

    renderCategories = () => {
        this.setState({ loading: true });

         axios
        .get('https://..............json')
        .then((res) => {

            this.setState({ myData: res.data,
                            error: res.error || null,
                            loading: false 
            });
            const categoryLive = this.state.myData;
            console.log(JSON.stringify(categoryLive));
        });



    };

    render() {
       // Set params in your render method :


        const { navigation, route } = this.props;
        const tabId = route.params?.tabId;

        if (this.state.loading){
            return (
            <View style={{ flex : 1, alignItems:  'center', justifyContent:  'center' }}>
                <ActivityIndicator/>
                </View>

                );
            }   
        return (

  // assign in your return statement  
     this.setState({ categories: tabId
            ? categoryLive[tabId]
            : categoryLive.victoria_bc;})

        //console.log(route.params?.tabId);
            const { categories } = this.state.categories;
         <Block flex center style={styles.categories}>
            <ScrollView
                showsVerticalScrollIndicator={false}
                contentContainerStyle={styles.categoryList}
            >
                <Block flex>
                    {categories.map((category) => (
                        <TouchableWithoutFeedback
                            key={`category-${category.id}`}
                            onPress={() => navigation.navigate('Category', { ...category })}
                        >
                            <Block flex card style={[styles.category, styles.shadow]}>
                                <ImageBackground
                                    source={{ uri: category.image }}
                                    style={[
                                        styles.imageBlock,
                                        { width: width - theme.SIZES.BASE * 2, height: 252 },
                                    ]}
                                    imageStyle={{
                                        width: width - theme.SIZES.BASE * 2,
                                        height: 252,
                                    }}
                                >
                                    <Block style={styles.categoryTitle}>
                                        <Text size={18} bold color={theme.COLORS.WHITE}>
                                            {category.title}
                                        </Text>
                                    </Block>
                                </ImageBackground>
                            </Block>
                        </TouchableWithoutFeedback>
                    ))}
                </Block>
            </ScrollView>
        </Block>
        );
    }
}
...