EN VI

Python - How to post and get value from react native into flask?

2024-03-12 15:30:08
Python - How to post and get value from react native into flask

I'm creating a simple project for this react native to integrate with flask, but the problem is as lack of knowledge and source, it's quite difficult to grasp the idea of this implementation. So the error I got is:

ERROR ReferenceError: Property 'saveData' doesn't exist

May I know what is the better solution for this

App.Js

import React, { Component, useEffect, useState } from 'react';
import { Text, View, SafeAreaView, TextInput, TouchableOpacity } from 'react-native';

export default function Homescreen() {
  const urlBase = 'http://127.0.0.1:5000'; // Corrected variable name

  const [data, setData] = useState();
  const [Sl, setSl] = useState(0);
  const [Sw, setSw] = useState(0);
  const [Pl, setPl] = useState(0);
  const [Pw, setPw] = useState(0);

  useEffect(() => {
    const saveData = async () => {
      const url = `${urlBase}/predict`;

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ Sl, Sw, Pl, Pw }), // Pass an object with properties
        });

        if (response.ok) {
          const result = await response.json();
          console.log('Data is added successfully:', result);
          setData(result);
        } else {
          console.error('Error fetching data from the server:', response.statusText);
        }
      } catch (error) {
        console.error('Error:', error);
      }
    };

    saveData(); // Call the function
  }, []); // Empty dependency array means this effect runs once on component mount

  return (
    <SafeAreaView className="flex-1 p-5 bg-white ">
      <View className=" flex-col">
        <View>
          <Text className="font-bold text-sky-700 text-center text-2xl">
            Beta Sypnapse Ai Project
          </Text>
        </View>
        <View className="m-3">
          <View className="rounded-2xl bg-gray-200 p-1 h-30 m-3">
            <TextInput
              placeholder="Sepal length"
              value={Sl}
              onChangeText={text => setSl(text)}
            />
          </View>
          <View className="rounded-2xl bg-gray-200 p-1 h-30 m-3">
            <TextInput
              placeholder="Sepal width"
              value={Sw}
              onChangeText={text => setSw(text)}
            />
          </View>
          <View className="rounded-2xl bg-gray-200 p-1 h-30 m-3">
            <TextInput
              placeholder="Petal length"
              value={Pl}
              onChangeText={text => setPl(text)}
            />
          </View>
          <View className="rounded-2xl bg-gray-200 p-1 h-30 m-3">
            <TextInput
              placeholder="Petal width"
              value={Pw}
              onChangeText={text => setPw(text)}
            />
          </View>
          <TouchableOpacity onPress={saveData}>
            <View className="rounded-2xl bg-blue-400 w-48 h-12 self-center items-center p-3 m-3">
              <Text className=" text-slate-50 text-sm">Identify the data</Text>
            </View>
          </TouchableOpacity>
        </View>
        <View>
          <Text className="self-center">
            The result will be : {data.prediction}
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

app.py

import numpy as np
from flask import Flask, request, jsonify, render_template
import pickle
from urllib.parse import quote as url_quote
from flask_cors import CORS

# Create flask app
flask_app = Flask(__name__)
model = pickle.load(open("model.pkl", "rb"))


@flask_app.route("/predict", methods=["POST", "GET"])
def predict():
    sl = request.json()
    sw = request.json()
    pl = request.json()
    pw = request.json()
    features = [np.array([sl, sw, pl, pw])]
    prediction = model.predict(features)
    return {"prediction": prediction}


if __name__ == "__main__":
    flask_app.run(debug=True)

To being able to post and get value from react and python

Solution:

You declare saveData() function inside useEffect, which means the function is accessible only in the scope of that function. I can see that you pass this function as argument on row 76:

      <TouchableOpacity onPress={saveData}>
        <View className="rounded-2xl bg-blue-400 w-48 h-12 self-center items-center p-3 m-3">
          <Text className=" text-slate-50 text-sm">Identify the data</Text>
        </View>
      </TouchableOpacity>

For that you have ReferenceError. If you still want to pass that function to this component, declare the function inside the component, not inside useEffect.

Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login