0

In Dialog component of React-Native, when the user pushes the KAYDET button to submit all inputs that are entered from the user, handleSubmit function works. But in handleSubmit function, setSeferBilgi does not set current values of gidilenYer, ton, fiyat for GidilenYer, Ton, Fiyat json values. It sets past values of them. What am I doing wrong?

import React, { useState, useEffect } from "react";
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
  FlatList,
  TouchableOpacity,
  Button,
} from "react-native";
import Constants from "expo-constants";
import AsyncStorage from "@react-native-community/async-storage";
import Dialog from "react-native-dialog";
const Hesap = () => {
  const [gidilenYer, setGidilenYer] = useState("");
  const [ton, setTon] = useState(0);
  const [fiyat, setFiyat] = useState(0);
  const [hesap, setHesap] = useState(0);
  const [toplamHesap, setToplamHesap] = useState(0);
  const [seferBilgi, setSeferBilgi] = useState({
    GidilenYer: "",
    Ton: 0,
    Fiyat: 0,
  });
  const [dialogVisible, setDialogVisible] = useState(false);
  const showDialog = () => {
    setDialogVisible(true);
  };
  const handleCancel = () => {
    setDialogVisible(false);
  };
  const handleSubmit = () => {
    console.log(gidilenYer);
    console.log(ton);
    console.log(fiyat);
    setSeferBilgi({ GidilenYer: gidilenYer, Ton: ton, Fiyat: fiyat });
    console.log(seferBilgi);
    setDialogVisible(false)
  };
  return (
    <View style={{ flex: 1, backgroundColor: "#f8f7f3" }}>
      <View style={{ marginTop: Dimensions.get("window").height / 15 }}>
        <View style={{ justifyContent: "center", flexDirection: "row" }}>
          <Button
            title="Yeni Kayıt Ekle"
            onPress={showDialog}
            color="#962b21"
          ></Button>
        </View>
        <View
          style={{
            flexDirection: "column",
            justifyContent: "space-between",
            padding: 5,
          }}
        >
          <Text>Gidilen Yer</Text>
          <Text>Atılan Ton</Text>
          <Text>Birim Ton Fiyatı</Text>
          <Text>Toplam Fiyat</Text>
        </View>
        <Dialog.Container visible={dialogVisible}>
          <Dialog.Input
            label="Gidilen Yer"
            onChangeText={(text) => setGidilenYer(text)}
          />
          <Dialog.Input
            label="Atılan ton"
            keyboardType="numeric"
            onChangeText={(text) => setTon(parseInt(text))}
          />
          <Dialog.Input
            label="Ton fiyatı"
            keyboardType="numeric"
            onChangeText={(text) => setFiyat(parseInt(text))}
          />
          <Dialog.Button label="İPTAL" onPress={handleCancel} />
          <Dialog.Button label="KAYDET" onPress={handleSubmit} />
        </Dialog.Container>
      </View>
    </View>
  );
};
export default Hesap;

This is my result from the console.log result from console terminal

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • 1
    **setSeferBilgi** is an asynchronous function, which means you won't find the latest value in the console.log right after setting the state. It is updating the state but the console.log is showing you the stale state. Move this console.log out of the handleSubmit function then you will be able to see the latest state. – Ammar Sep 11 '21 at 10:45
  • https://dev.to/shareef/react-usestate-hook-is-asynchronous-1hia – mplungjan Sep 11 '21 at 12:23

0 Answers0