React Native: Updating Data in Android after changing mySql Value in PHP

Question

I have a simple script to like a Photo. In Browser everything works fine. Updating data in mySql and showing result in Browser. But in Android when I click "heart" it changes the value in mySql but doesnt show the right result. Pic not liked...click like...mySql showes it was liked...Android doesn show this...click again like...mySql shows pic is not liked...Android showes it was liked

Here my Code REACT NATIVE:

import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';

import axios from 'axios';

export default class ImageList extends React.Component {


    constructor(props) {
        super(props);

        this.state = {
            images: [],
            handyWidth: Dimensions.get('window').width,
            mainContainerWidth: Dimensions.get('window').width * 0.96,
            handyHeight: Dimensions.get('window').height,
            imageOptionsWidth: null,
            windowWidth: null,
            windowHeight: null,
            imageWidth: null,
            containerOfPictureMargin: null,
            descriptionMargin: null,
            imageOptionsWidthLeft: null,
            imageOptionsWidthRight: null
        }
    }

    addLike = async (val) => {

        const formData = new FormData();
        formData.append('imageId', val);
        fetch('https://projectwebua.000webhostapp.com/updateLikes.php', {
            body: formData,
            method: 'POST'
        });

        this.loadData();

    };

    loadData = () => {

        axios.get(`https://projectwebua.000webhostapp.com/sqlAnswer.php`)
            .then(res => {
                const images = res.data;
                this.setState({ images });
            })

    }

    componentDidMount() {

        this.state.imageOptionsWidth = this.state.handyWidth;
        this.state.imageWidth = this.state.handyWidth * 0.84;

        this.state.containerOfPicture = this.state.handyWidth * 0.96;
        this.state.containerOfPictureInner = this.state.handyWidth * 0.92;
        this.state.containerOfPictureInnerMargin = this.state.handyWidth * 0.02;

        this.state.descriptionMargin = this.state.handyWidth * 0.03;
        this.state.descriptionTextMargin = this.state.handyWidth * 0.01;
        this.state.descriptionTextMarginHeart = this.state.handyWidth * 0.04;

        this.state.imageOptionsWidthLeft = this.state.handyWidth * 0.7;
        this.state.imageOptionsWidthRight = this.state.handyWidth * 0.22;

        this.state.containerOfPictureMargin = this.state.handyWidth * 0.02;

        this.loadData();

    }

    render() {

        return (
            <View>

                <View>

                    {
                        this.state.images.map((i, k) => (

                            <View>

                                <View style={{

                                    backgroundColor: '#e9f5f9',
                                    marginBottom: 20,
                                    borderColor: "grey",
                                    borderWidth: 1,
                                    width: this.state.containerOfPicture,

                                }}>

                                    <View>

                                        <Image
                                            source={{ uri: i.source }}
                                            style={{ 
                                                width: this.state.containerOfPictureInner, 
                                                height: 200, 
                                                marginLeft: this.state.containerOfPictureInnerMargin, 
                                                marginRight: this.state.containerOfPictureInnerMargin,
                                                marginTop: 10
                                            }}
                                            resizeMode="contain"
                                            resizeMethod="resize"
                                        />

                                    </View>

                                    <View style={{

                                        marginLeft: this.state.descriptionMargin,
                                        marginRight: this.state.descriptionMargin,
                                        borderBottomColor: "grey",
                                        borderBottomWidth: 1,
                                        marginBottom: 10,

                                    }}>

                                        <Text style={{ 
                                            marginLeft: this.state.descriptionTextMargin, 
                                            marginRight: this.state.descriptionTextMargin 
                                        }}>
                                            {i.description}
                                        </Text>

                                    </View>


                                    <View style={{
                                        
                                        flexDirection: 'row',
                                        paddingLeft: 10,
                                        paddingBottom: 10,

                                    }}>

                                        <View style={{
                                            width: this.state.imageOptionsWidthLeft,
                                        }}>
                                            <Text>Likes: {i.likes}</Text>
                                        </View>

                                        <View style={{
                                            width: this.state.imageOptionsWidthRight,
                                            alignItems: 'flex-end',
                                            paddingRight: this.state.descriptionTextMarginHeart
                                        }}>
                                            <Text onPress={() => { this.addLike(i.id) }}>&#129505;</Text>
                                        </View>

                                    </View>

                                </View>

                            </View>

                        ))}

                </View>

            </View >

        )
    }
}

sqlAnswer.php

header('Content-Type: application/json; charset=utf-8');
 header("Access-Control-Allow-Origin: *");
 header("Access-Control-Allow-Methods: PUT, GET, POST");

 $dbhost = "###########";
 $dbuser = "###########";
 $dbpass = "###########";
 $db = "###########";

 $conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die("Connect failed: %s\n". $conn -> error);
    
 if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
 }

 $sql = "SELECT id, description, likes, source, liked FROM images;";
 $result = mysqli_query($conn, $sql);
 if (!$result) {
    echo 'Query error: ' . mysqli_error($mysqli) . "</br></br>";
    die();
 }
 //ECHO OF DATABASE
 $i=0;
 while ($row = mysqli_fetch_assoc($result)) {
    $response[$i] = array("id" => $row['id'], "description" => $row['description'], "likes" => $row['likes'],  "liked" => $row['liked'], "source" => $row['source']);
    $i++;
 }

 $conn -> close();

 echo json_encode($response);

updateLikes.php

header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");


console.log('HIER STARTET DB');

$host = "#############";
$user = "#############";
$password = "#############";
$db = "#############";
   
 $conn = mysqli_connect($host, $user, $password,$db);  

 if (!$conn) {
     die("Connection failed: " . mysqli_connect_error());
 }


$sql = "SELECT id, description, likes, source, liked FROM images WHERE id='".$_POST['imageId']."';";


 $result = mysqli_query($conn, $sql);
 if (!$result) {
    echo 'Query error: ' . mysqli_error($mysqli) . "</br></br>";
    die();
 }

 $row = mysqli_fetch_assoc($result);

 if($row['liked'] == "0") {
    
    $insertLiked = "1";
    $insertLikes = $row['likes'] + 1;

    //HERE UPDATE
    
    
 } else {
     
    //Bild wurde schon geliked
    
    $insertLiked = "0";
    $insertLikes = $row['likes'] - 1;
     
 }
 
 $sql = "UPDATE images 
            SET likes = ".$insertLikes.",
                liked = ".$insertLiked." 
        WHERE   id='".$row['id']."';";
 
 mysqli_query($conn, $sql);

Answer 1

fetch is asynchronous function. You should wait for it to finish before calling loadData().

await fetch('https://projectwebua.000webhostapp.com/updateLikes.php', {
  body: formData,
  method: 'POST'
});

this.loadData();