Передайте параметры объекта с помощью onPress () в реакции-навигации

Question

Я пытаюсь передать параметр объекта с помощью onPress () в PlanScreen в PlanDetailScreen, но возникла ошибка как 'TypeError; undefined не является объектом (оценка «detail.weekNumber»). Как решить?

function PlanDetailScreen({ detail }) {
  return (
    <SafeAreaView>
      <Text key={detail.weekNumber}>{"Week " + detail.weekNumber}</Text>
    </SafeAreaView>
  );
}

function PlanScreen({ navigation }) {
  return (
    <FlatList
      numColumns={5}
      data={PlanData}
      renderItem={({ detail }) => (
        <TouchableOpacity
          onPress={(detail) =>
            navigation.navigate("PlanDetailScreen", { detail })
          }
        >
          <Text key={detail.weekNumber}>{"Uke\n" + detail.weekNumber}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

Answer 1

То, что Мухаммед сказал , правильно, но вы также должны учитывать, что параметры навигации входят в route опору экрана.

Это будет выглядеть примерно так:

function PlanDetailScreen({ route }) {
  return (
    <SafeAreaView>
      <Text key={detail.weekNumber}>{"Week " + route.params.detail.weekNumber}</Text>
    </SafeAreaView>
  );
}

function PlanScreen({ navigation }) {
  return (
    <FlatList
      numColumns={5}
      data={PlanData}
      renderItem={({ detail }) => (
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("PlanDetailScreen", { detail })
          }
        >
          <Text key={detail.weekNumber}>{"Uke\n" + detail.weekNumber}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

Взгляните на: https://reactnavigation.org/docs/params/

Answer 2

Вы переопределяете detail, поэтому деталь не определена, просто удалите ее из onPress

function PlanDetailScreen({ detail }) {
  return (
    <SafeAreaView>
      <Text key={detail.weekNumber}>{"Week " + detail.weekNumber}</Text>
    </SafeAreaView>
  );
}

function PlanScreen({ navigation }) {
  return (
    <FlatList
      numColumns={5}
      data={PlanData}
      renderItem={({ detail }) => (
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("PlanDetailScreen", { detail })
          }
        >
          <Text key={detail.weekNumber}>{"Uke\n" + detail.weekNumber}</Text>
        </TouchableOpacity>
      )}
    />
  );
}