Question

问题：

我正在尝试找出如何从功能组件“ ContractHandler”中导出名为“ addPostCode”的函数。
我想在名为“ 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）或5:00:00，或者如果组件是同级，只需使用它们的公共父级来存储状态。

Answer 2

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

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

2 个答案: