画面遷移時にpropsデータの読み込みに時間差が出る

前提・実現したいこと

React Nativeを利用してアプリの開発をしています。

Aの画面から、Bの画面に遷移する際に、Aで状態を変えたstateをBの画面に渡し、そのstateのデータを元に画面の表示をしたいです。

画面遷移にはreact-navigationのStack.Navigatorを利用しています。

Aの画面でstateの状態を変える方法に、useReducerを利用しています。

発生している問題

現在作成したコードでは、以下の動きとなってしまします。

①：Aの画面で、useReducerで作成したdispatch関数でstateの状態を変更
②：Aの画面では、stateの状態が変更され、画面表示にも反映できる
③：ReactNavigationを利用し、AからBへ画面遷移する。この時に①で状態変更したstateをpropsで渡す
④：Bの画面に遷移した際に、Aから渡されたstateが画面表示に反映されない
⑤：Aの画面に戻る
⑥：もう一度、dispatch関数でstateの状態を変更し、Bの画面へ遷移
⑦：２回目の遷移時に②で確認できたsteteの状態で画面に反映される

どのようなコードにすれば、④のBの画面に遷移した際に、①で状態変更したstateを利用し画面の表示ができるでしょうか？

該当のソースコード

A画面

JS
1import React, { useReducer } from "react";
2import { StyleSheet, TouchableOpacity, Text, View } from "react-native";
3
4const reducer = (state = [], action) => {
5  switch (action.type) {
6    case "CREATE":
7      let length = state.length;
8      const id = length === 0 ? 1 : state[length - 1].id + 1;
9      return [...state, { id }];
10
11    default:
12      return state;
13  }
14};
15
16export default function AScreen(props) {
17  const { navigation } = props;
18
19  const [state, dispatch] = useReducer(reducer, []);
20
21  const handleResister = () => {
22    dispatch({
23      type: "CREATE",
24    });
25    handleToB();
26  };
27  const handleToB = () => {
28    navigation.navigate("BScreen", { state });
29  };
30  return (
31    <>
32      <TouchableOpacity
33        onPress={() => {
34          handleResister();
35        }}
36        style={styles.button}
37      >
38        <Text>登録する</Text>
39      </TouchableOpacity>
40
41      {state.map((recipe) => {
42        return (
43          <View style={styles.list} key={recipe.id}>
44            <Text> {recipe.id}</Text>
45          </View>
46        );
47      })}
48    </>
49  );
50}
51
52const styles = StyleSheet.create({
53  button: {
54    backgroundColor: "skyblue",
55    width: 200,
56    height: 40,
57    justifyContent: "center",
58    alignItems: "center",
59    alignSelf: "center",
60  },
61
62  list: {
63    backgroundColor: "#ddd",
64    margin: 5,
65    padding: 10,
66  },
67});
68

B画面

JS
1import React, { useState, useEffect } from "react";
2import { View, Text, StyleSheet } from "react-native";
3
4export default function BScreen(props) {
5  const { route } = props;
6
7  return (
8    <>
9      {route.params.state.map((recipe) => {
10        return (
11          <View style={styles.list} key={recipe.id}>
12            <Text> {recipe.id}</Text>
13          </View>
14        );
15      })}
16    </>
17  );
18}
19
20const styles = StyleSheet.create({
21  list: {
22    backgroundColor: "#ddd",
23    margin: 5,
24    padding: 10,
25  },
26  InputName: {
27    borderWidth: 1,
28    height: 40,
29    backgroundColor: "#fff",
30  },
31
32  hr: {
33    borderBottomWidth: 1,
34    borderBottomColor: "gray",
35    marginTop: 10,
36    marginBottom: 10,
37  },
38
39  category: {
40    width: "100%",
41    backgroundColor: "#ddd",
42    marginBottom: 5,
43    borderRadius: 10,
44    padding: 10,
45  },
46  categoryAmount: {
47    flexDirection: "row",
48    alignSelf: "flex-end",
49  },
50
51  textH1: {
52    fontSize: 20,
53    margin: 5,
54  },
55
56  elementWrap: {
57    flexDirection: "row",
58    margin: 5,
59  },
60  elementName: {
61    fontSize: 20,
62    margin: 5,
63  },
64
65  InputFertilizerName: {
66    flex: 1,
67    borderWidth: 1,
68    backgroundColor: "#fff",
69    borderRadius: 5,
70    height: 40,
71  },
72  elementNumberInput: {
73    height: 40,
74    width: 60,
75    backgroundColor: "#fff",
76    borderColor: "black",
77    borderWidth: 1,
78    textAlign: "center",
79    fontSize: 14,
80    borderRadius: 10,
81  },
82
83  buttonDelate: {
84    backgroundColor: "tomato",
85    width: 80,
86    height: 40,
87    borderRadius: 5,
88    margin: 3,
89    justifyContent: "center",
90    alignItems: "center",
91    alignSelf: "center",
92  },
93});
94

試したこと

B画面にuseEffectを利用してみましたが、改善されませんでした。

JS
1export default function BScreen(props) {
2  const { route } = props;
3
4  const [test, setTest] = useState([]);
5
6  useEffect(() => {
7    setTest(route.params.state);
8  }, []);
9
10  return (
11    <>
12      {test.map((recipe) => {
13        return (
14          <View style={styles.list} key={recipe.id}>
15            <Text> {recipe.id}</Text>
16          </View>
17        );
18      })}
19    </>
20  );
21}

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
expo: 3.24.2
react native : 4.10.1
react-navigation: 5.7.3

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1const handleToB = () => {
2  navigation.navigate("BScreen", { state });
3};

この段階でのstateには"CREATE"をdispatchした結果が渡っていないため難しいと思います。
思いつく限りでは、case "CREATE":で行なっていることをreducerを経由せずにhandleResister内で行ってから、その結果をnavigation.navigateの第二引数にするしかないかなと思います。

投稿2020/08/24 09:17