はじめての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でサーバーは動かしています。
何度も助けて頂きありがとうございました。
すぐにはできませんがもう一度動画を最初から見直して間違いがないか確かめようと思います。
また新しい動画も楽しみにしています。
Postmanを初めてつかったので少し手間取りました。
http://localhost:8000/api/blog/にGETすると以下のリストが返ってくるようです。
[
{
"id": 4,
"title": "いいいいいいいいい",
"content": "1111111111111",
"updated_at": "2022/07/20 04:25",
"created_at": "2022/07/20 04:25"
},
{
"id": 3,
"title": "テスト3",
"content": "うううううううううううううううう",
"updated_at": "2022/07/19 12:52",
"created_at": "2022/07/19 12:52"
}
]
バックエンドは問題なそうですね。
おそらく下記のファイルのどこかが間違っているかと思いますので、見直しをお願いします。
store/actions/blog.js
store/reducers/blog.js
すみません、バックエンド側からどうやってフロントエンドに値を持って行ってるのかまだ理解できておらずバックエンドのどこを確認すれば良いかわかりませんでした。
serializers.pyでしょうか?
# クエリセットやモデルインスタンスのような複雑なデータをJson形式フォーマットに変換する役割
from rest_framework import serializers
from .models import Blog
class BlogSerializer(serializers.ModelSerializer):
class Meta:
model = Blog
#allと指定することで全てのカラムを読み込む
fields = '__all__'
returnの直前に書いて変数内容を確認しました。
console.log( "blog = " , blog)
return (
<>
{blog ? (
<ScrollView style={tw`bg-gray-100 p-2`}>
{blog.map((item) => {
console.logは3回出力されており、上から順番に
blog = null
blog = true
blog = true
でした。
blog変数の初期値はnullでよいのですが、trueになっているのはおかしいですね。
リストで値が入ってくるので、バックエンドもご確認をお願いします。
console.logで調べたらSET_BLOG_LOADINGのスペルが間違えていてそこで止まっていたことがわかりました。
全てのSET_BLOG_LOADINGのスペルを直したところ、get_blogは無事最後まで実行できました。
どうもありがとうございました。
しかしそのあと別のエラーが発生しました。
エラーメッセージ
undefined is not a function(near '...blog.map')
{blog.map((item) => {
この行でエラーとのことですが、さすがに間違ってないと思うんですが解決できません。
すみませんがアドバイスお願いします。
returnの前に
console.log("blog", blog)
を書いて、blog変数に何が入っているか確かめてみてください。
コードは合ってそうなので、get_blog関数にconsole.logを入れながら、どこまで上手く行っているのか確かめてみてください。
どこかでエラーになっているかと思います。