React Native: экспорт функции из функционального компонента

Question

Проблема:

1. Я пытаюсь выяснить, как экспортировать функцию с именем "addPostCode" из функционального компонента ContractHandler.

2. Я хочу использовать «addPostCode» в другом функциональном компоненте «RentalDetailScreen», чтобы при переходе на следующую страницу он вызывал «addPostCode» и сохранял состояние «postCode» в «ContractHandler».

Это "ContractHandler. js":

import React, { useState } from 'react';

const ContractHandler = () => {

  const [postCode, setPostCode] = useState();

  const addPostCode = (data) => {
    setPostCode(data)
    console.log(postCode)
  };

  return(
    <View>
      <Text></Text>
    </View>
  )

}

export default ContractHandler;

Это части RentalDetailScreen. js, где я перехожу на следующую страницу и хотите вызвать функцию "addPostCode" и отправить значение "postCode" в "ContractHandler. js".

Это импорт:

import { addPostCode } from '../../database/ContractHandler';

Это навигация с помощью функции «addPostCode».

<TouchableOpacity onPress={() => { navigation.navigate('SecurityDetail'); addPostCode(postCode); }}>
  <View style={slider.buttonStyle}>
    <Text style={slider.textStyle}>Neste</Text>
    <Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
  </View>
</TouchableOpacity>

«postCode» - это просто переменная, которой присваивается значение из TextInput.

Если я не достаточно ясен, пожалуйста, дайте мне Я знаю, и я постараюсь объяснить лучше:)

Answer 1

Есть два способа решить эту проблему. Вы можете использовать менеджер состояний, такой как, например, redux, или вам нужно передавать функцию как реквизит от компонента к компоненту. Лично я бы использовал избыточность, потому что это упрощает распределение состояния между компонентами.

Answer 2

Собственное состояние компонентов не может быть установлено извне (технически вы можете решить это, но это не правильный путь). Если вы хотите поделиться состоянием между компонентами, используйте глобальный менеджер состояний (redux) или Context, или если компоненты являются родственными, просто используйте их общий родительский элемент для хранения состояния.