実現したいこと

HOMEビュー⇒EDITビュー⇒編集内容が適用されたHOMEビュー
#起きたこと
HOMEビュー⇒EDITビューの遷移直後ボタン押下時の処理が走ってしまう。

やったこと

他のエラーで一時対応したときのuseEffectをやめた。⇒効果なし

#コード

App.js

Javascript
1import 'react-native-gesture-handler';
2import React from 'react';
3import { StyleSheet} from 'react-native';
4import {NavigationContainer} from '@react-navigation/native';
5import {createStackNavigator} from '@react-navigation/stack';
6
7import Main from './Main';
8import Edit from './Edit';
9
10export const AppActions = {
11    changeValue : 0
12}
13
14export default function App() {
15    const Stack = createStackNavigator();
16    return (
17        <NavigationContainer>
18            <Stack.Navigator initialRouteName="Home">
19                <Stack.Screen name="Home" component={Main}/>
20                <Stack.Screen name="Edit" component={Edit}/>
21            </Stack.Navigator>
22        </NavigationContainer>
23    );
24
25
26    const styles = StyleSheet.create({
27        container: {
28            flex: 1,
29            backgroundColor: '#fff',
30            alignItems: 'center',
31            justifyContent: 'center',
32        }
33    });
34}

Main.js

Javascript
1import 'react-native-gesture-handler';
2import * as React from 'react';
3//import ConsumeType from './data/consumeType.js';
4import {View,FlatList,Text} from "react-native";
5import {useNavigation} from "@react-navigation/native";
6import {useState,useEffect} from "react";
7import {Button} from "react-native-paper";
8import {AppActions} from "./App";
9import {loadAll,clear} from "./storage";
10
11const initialData=
12    //testData
13    [
14        {
15            name: "交通費",
16            amount: 1000
17        }
18    ];
19
20
21
22export default function Main({route,navigation}) {
23    const navi  = useNavigation();
24    const data = {};
25    useEffect(()=>{
26        const init = async () =>{
27            await loadAll();
28        };
29        const unsubscribe = navi.addListener('focus',init);
30        return unsubscribe;
31    },[navi]);
32    let dt = new Date();
33    let month = dt.getFullYear().toString()+dt.getMonth().toString();
34
35    const renderItem = ({item}) => {
36        console.log(item);
37        return <View>
38            <Text>{item.name}{"\t"}{item.amount}</Text>
39            <Button onPress={() =>{
40                navi.navigate('Edit',{
41                    dt:month,
42                    data:item});
43            }}
44            >Edit</Button>
45        </View>
46    }
47
48    return <View>
49        <FlatList
50            data={data}
51            keyExtractor={item =>  item.name}
52            renderItem={renderItem}
53        />
54        <Button onPress={()=>navi.navigate('Edit',{
55            dt:month,
56            data:{
57                name:"",
58                amount:0
59            }
60        })}>追加</Button>
61        <Button
62            onPress={()=> clear()}
63        >消去</Button>
64    </View>;
65
66}

Edit.js

Javascript
1import React,{useState,useEffect} from 'react';
2import {Button, Text, TextInput} from "react-native-paper";
3import {KeyboardAvoidingView} from "react-native";
4
5import {AppActions} from './App';
6import {save} from "./storage";
7
8
9export default function Editor({route,navigation,value,setValue,label,setLabel}){
10    console.log(route.params);
11    const month = route.params["dt"];
12    const {name, amount} = route.params["data"];
13    [value,setValue] = useState("");
14    [label,setLabel] = useState("");
15
16    const  changeValue = async (navigator, name, value, month) => {
17        await save(AppActions.changeValue, {
18            dt : month,
19            data : {
20                name : name,
21                amount : value,
22            }
23        });
24        navigation.goBack();
25    }
26
27    return (
28        <KeyboardAvoidingView>
29            <>
30                { name === "" ?
31                    <TextInput
32                    label={"name"}
33                    onChangeText={(value)=>{
34                        setLabel(value);
35                    }}
36                    />
37                :
38                    <></>
39                }
40            </>
41            <TextInput
42                label={"amount"}
43                value={amount}
44                onChangeText={(value)=>{
45                    setValue(value);
46                }}
47            />
48            <Button
49             onPress={changeValue(navigation,name==="" ? label : name,value,month)}
50            >決定</Button>
51        </KeyboardAvoidingView>
52    );
53}

storage.js

Javascript
1import AsyncStorage from "@react-native-async-storage/async-storage";
2import {AppActions} from "./App";
3
4export const save=async (dType,data0)=>{
5    if(dType===AppActions.changeValue){
6        let {dt , data} = data0;
7        let entry = await AsyncStorage.getItem(dt);
8        console.log("Before:",entry);
9        if(entry === undefined　|| entry === null){
10            entry = data;
11        }else{
12            entry[data["name"]] = data["amount"];
13        }
14        console.log("After:",entry);
15        await AsyncStorage.setItem(dt,entry);
16    }
17};
18
19export const loadAll= async ()=>{
20        const keys = await AsyncStorage.getAllKeys();
21        const entries : Object= await AsyncStorage.multiGet(keys);
22        console.log(entries);
23        return entries.map(entry => JSON.parse(entry));
24    };
25
26export const clear = async () =>{
27    await AsyncStorage.clear();
28}