React Native：从功能组件导出功能

Question

问题：

1. 我试图弄清楚如何从功能组件“ContractHandler”中导出一个名为“addPostCode”的函数。

2. 我想在另一个名为“RentalDetailScreen”的功能组件中使用“addPostCode”，以便当我导航到下一页时，它将触发“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) 或Context或者如果组件是兄弟组件，只需使用它们的公共父级来存储状态。

Answer 2

有两种方法可以解决这个问题。 您可以使用像 redux 这样的状态管理器，或者您必须将函数作为道具从组件传递到组件。 我个人会使用 redux，因为它可以更简单地在组件之间共享状态。