前提・実現したいこと
現在React Native でTikTokクローンを作成しています。
参考にしている動画がこちらです。
Build a TikTok Clone in React Native [Tutorial for Beginners] 🔴
実現したいことは、いいねボタン(ハートマーク)をクリックするといいねの数が1つ増える実装です。
ですが、ハートをクリックすると下記のエラーが出てしまいます。
発生している問題・エラーメッセージ
エラー画面のスクリーンショット
エラーメッセージ
component exception undefined is not an object
該当のソースコード
import React, {useState} from 'react';
import {View, Text, TouchableWithoutFeedback, Image, TouchableOpacity} from 'react-native';
import Video from 'react-native-video';
import styles from './styles';
import Entypo from 'react-native-vector-icons/Entypo';
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Fontisto from 'react-native-vector-icons/Fontisto';
const Post = (props) => {
const [post, setPost] = useState(props.post);
const [paused, setPaused] = useState( {initialState: false});
const onPlayPausePress = () => {
setPaused(!paused);
};
const onLikePress = () => {
setPost( {value: {
...post,
likes: post.likes + 1,
}});
};
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={onPlayPausePress} >
<View>
<Video
source={{uri: post.videoUri }}
style={styles.video}
onError={(e :LoadError) => console.log(e)}
resizeMode={'cover'}
repeat={true}
paused={paused}
/>
<View style={styles.uiContainer}>
<View style={styles.rightContainer}>
<Image
style={styles.profilePicture}
source={{uri: post.user.imageUri}}
/>
<TouchableOpacity style={styles.iconContainer} onPress={onLikePress}>
<AntDesign name='heart' size={40} color='white'/>
<Text style={styles.statsLabel}>{post.likes}</Text>
</TouchableOpacity>
<View style={styles.iconContainer}>
<FontAwesome name='commenting' size={40} color='white'/>
<Text style={styles.statsLabel}>{post.comments}</Text>
</View>
<View style={styles.iconContainer}>
<Fontisto name='share-a' size={35} color='white'/>
<Text style={styles.statsLabel}>{post.shares}</Text>
</View>
</View>
<View style={styles.bottomContainer}>
<View>
<Text style={styles.handle}>{post.user.username}</Text>
<Text style={styles.description}>{post.description}</Text>
<View style={styles.songRow}>
<Entypo name='beamed-note' size={24} color='white'/>
<Text style={styles.songName}>{post.songName}</Text>
</View>
</View>
<Image
style={styles.songImage}
source={{uri: post.songImage}}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</View>
);
}
export default Post ;
試したこと
onPressで指定した変数onLikePressが正常に動くかを確認するために
中身を下記のように書き換えてみたところ正常に動きました。
const onLikePress = () => {
console.warn('hello')
};
またエラー画面には下記のコードに問題があると指摘されていましたが、上記での確認作業では何もエラーが起きなかったことから問題点はonLikePress内の記述であると判断しました。
source={{uri: post.user.imageUri}}
補足情報(FW/ツールのバージョンなど)
その他、キャッシュを消す作業も行ってみましたが、同じエラーが起きてしまいます。
こちらを参考にしました。
React Native キャッシュの削除方法
お力添えしていただけると幸いです。よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
下記3行目のvalue:{}の部分が不要だったようです。
//修正前
const onLikePress = () => {
const likesToAdd = isLiked ? -1 : 1;
setPost({value:{
...post,
likes: post.likes + likesToAdd,
}});
setIsLiked(!isLiked);
};
//修正後
const onLikePress = () => {
const likesToAdd = isLiked ? -1 : 1;
setPost({
...post,
likes: post.likes + likesToAdd,
});
setIsLiked(!isLiked);
};
文法ミスやスペルミスでもエラー文にはComponent Exceptionと出てしまうこともあるみたいなので出た際には厄介ですね。(汗)
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる