ローディング画面のままでブログ一覧が表示されない
解決済
回答 10
2022/07/19 15:14
質問内容

実現したいこと

はじめてのReact NativeとDjango REST Frameworkスマホアプリ開発 https://www.youtube.com/watch?v=CWVKWtb2UZk 35:00あたりのように、ブログ一覧画面が表示したい

発生している問題

画面にローディング中のぐるぐるが表示されたままで変化がありません。

ソースコード

import React, {useEffect} from 'react'
import { ActivityIndicator,ScrollView,Text,View,TouchableOpacity } from 'react-native'
import { useSelector, useDispatch } from 'react-redux'
import { get_blog } from '../../store/actions/blog'
import tw from 'twrnc'


const BlogScreen = ({ navigation }) => {
    const dispatch = useDispatch()
    const blog = useSelector((state) => state.blog.blog)

    useEffect(() => {
        const fn  = async () => {
            if (dispatch && dispatch !== null && dispatch !== undefined) {
                await dispatch(get_blog())
            }
        }
        fn()
    }, [dispatch])

    const selectBlog = (id) => {
        navigation.navigate('BlogDetailScreen', {
            blogId: id,
        })
    }

    return (
        <>
        {blog ? (
            <ScrollView style={tw`bg-gray-100 p-2`}>
                {blog.map((item) => {
                    return (
                        <TouchableOpacity
                            style={tw`border rounded p-5 border-gary-300 bg-white mb-2`}
                            onPress={() =>{
                                selectBlog(item.id)
                            }}
                            key={item.id}
                        >
                            <Text style={tw`text-sm mb-2 text-center`}>{item.created_at}</Text>
                            <Text style={tw`font-bold text-xl mb-2 text-center`}>{item.title}</Text>
                        </TouchableOpacity>
                    )
                })}
            </ScrollView>
        ) : (
            <View style={tw`flex-1 justify-center items-center`}>
                <ActivityIndicator size="large" color="orange" />
            </View>
        )}  
        </>
    )
}    

export default BlogScreen

自分で試したこと

記事とタイトルが3件登録されている事を確認しました。 DBからの読み込みがうまくいってないのを疑い python manage.py migrateを再度実行しても変化ありませんでした。

補足情報

python manage.py runserverでサーバーは動かしています。

回答 10
ベストアンサーを選択すると、解決済みとなります。
nodata
まだ回答がありません
回答
nodata
回答するにはログインが必要です