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

Question

前提・実現したいこと

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画面

import React, { useReducer } from "react";
import { StyleSheet, TouchableOpacity, Text, View } from "react-native";

const reducer = (state = [], action) => {
  switch (action.type) {
    case "CREATE":
      let length = state.length;
      const id = length === 0 ? 1 : state[length - 1].id + 1;
      return [...state, { id }];

    default:
      return state;
  }
};

export default function AScreen(props) {
  const { navigation } = props;

  const [state, dispatch] = useReducer(reducer, []);

  const handleResister = () => {
    dispatch({
      type: "CREATE",
    });
    handleToB();
  };
  const handleToB = () => {
    navigation.navigate("BScreen", { state });
  };
  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleResister();
        }}
        style={styles.button}
      >
        <Text>登録する</Text>
      </TouchableOpacity>

      {state.map((recipe) => {
        return (
          <View style={styles.list} key={recipe.id}>
            <Text> {recipe.id}</Text>
          </View>
        );
      })}
    </>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "skyblue",
    width: 200,
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },

  list: {
    backgroundColor: "#ddd",
    margin: 5,
    padding: 10,
  },
});

B画面

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet } from "react-native";

export default function BScreen(props) {
  const { route } = props;

  return (
    <>
      {route.params.state.map((recipe) => {
        return (
          <View style={styles.list} key={recipe.id}>
            <Text> {recipe.id}</Text>
          </View>
        );
      })}
    </>
  );
}

const styles = StyleSheet.create({
  list: {
    backgroundColor: "#ddd",
    margin: 5,
    padding: 10,
  },
  InputName: {
    borderWidth: 1,
    height: 40,
    backgroundColor: "#fff",
  },

  hr: {
    borderBottomWidth: 1,
    borderBottomColor: "gray",
    marginTop: 10,
    marginBottom: 10,
  },

  category: {
    width: "100%",
    backgroundColor: "#ddd",
    marginBottom: 5,
    borderRadius: 10,
    padding: 10,
  },
  categoryAmount: {
    flexDirection: "row",
    alignSelf: "flex-end",
  },

  textH1: {
    fontSize: 20,
    margin: 5,
  },

  elementWrap: {
    flexDirection: "row",
    margin: 5,
  },
  elementName: {
    fontSize: 20,
    margin: 5,
  },

  InputFertilizerName: {
    flex: 1,
    borderWidth: 1,
    backgroundColor: "#fff",
    borderRadius: 5,
    height: 40,
  },
  elementNumberInput: {
    height: 40,
    width: 60,
    backgroundColor: "#fff",
    borderColor: "black",
    borderWidth: 1,
    textAlign: "center",
    fontSize: 14,
    borderRadius: 10,
  },

  buttonDelate: {
    backgroundColor: "tomato",
    width: 80,
    height: 40,
    borderRadius: 5,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
});

試したこと

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

export default function BScreen(props) {
  const { route } = props;

  const [test, setTest] = useState([]);

  useEffect(() => {
    setTest(route.params.state);
  }, []);

  return (
    <>
      {test.map((recipe) => {
        return (
          <View style={styles.list} key={recipe.id}>
            <Text> {recipe.id}</Text>
          </View>
        );
      })}
    </>
  );
}

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

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

Answer 1

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

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

Comments

[tomaa]

ご回答いただきありがとうございます。
navigation.navigateの第２引数にする方法で対応したいと思います。
ありがとうございます。