如何从一个react native组件共享数据到另一个组件

Question

我有一个组件"Address"如果我正在使用google-places-autocomplete来获取地址。之后，我提取所需的数据(如国家，邮政编码等)。现在我想把这些数据转移到"主组件"中对于调用的位置。在地址组件中，我使用了useState()来存储数据。

import { View, StyleSheet, TextInput } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import {  } from "react-native";
import Colors from "../constants/Colors";
let places = [];
const Address = (props) => {
const [place, setPlace] = useState();
const [postalCode, setPostalCode] = useState();
const [country, setCountry] = useState();
const [state, setState] = useState();
const [city, setCity] = useState();
const setCountryHandler=(value)=>{
setCountry(value)
}
const setPostalCodeHandler=(value)=>{
setPostalCode(value)
}
const setCityHandler=(value)=>{
setCity(value);
}
const setStateHandler=(value)=>{
setState(value)
}

return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
marginVertical: 10,
}}>
<View
style={styles.search}
>
<GooglePlacesAutocomplete
placeholder="Address"
onPress={(data,details=null)=>{
let address = details.address_components;
let address1 = [];
for (let i = 0; i < 1; i++) {
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "sublocality") {
places.push(address[i].long_name);
}
}
}
setPlace(places);
places = [];
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "locality") {
setCityHandler(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "administrative_area_level_1") {
setState(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "country") {
setCountry(address[i].long_name);
}
}
}
for (let i in address) {
address1 = address[i].types;
for (let j in address1) {
if (address1[j] === "postal_code") {
setPostalCode(address[i].long_name);
}
}
}
}}
enablePoweredByContainer={false}
disableScroll={false}
fetchDetails={true}

query={{
key: "#############################",
language: "en",
}}
styles={{
textInputContainer: {
width: "100%",
},
}}
/>
</View>
<View
style={{ justifyContent: "center", alignItems: "center", width: "80%" }}
>
<View style={styles.container}>
<TextInput placeholder="city" defaultValue={city} onChangeText={setCityHandler}/>
</View>
<View style={styles.container}>
<TextInput placeholder="state" defaultValue={state} onChangeText={setStateHandler}/>
</View>
<View style={styles.container}>
<TextInput placeholder="country" defaultValue={country} onChangeText={setCountryHandler} />
</View>
<View style={styles.container}>
<TextInput placeholder="pincode" defaultValue={postalCode} onChangeText={setPostalCodeHandler}/>
</View>
</View>

</View>
);
};
const styles = StyleSheet.create({
container: {
marginVertical: 10,
width: "100%",
paddingVertical: 8,
paddingHorizontal: 8,
borderColor: Colors.accent,
borderWidth: 1,
borderRadius: 6,
backgroundColor: "white",
},
search:{
marginBottom:10,
width: "80%",
borderColor: Colors.accent,
borderWidth: 1,
borderRadius: 6,
backgroundColor: "white",
}
});
export default Address;

这是我的代码，我想把data =城市，州，邮政编码，国家转移到另一个组件

Answer 1

要将数据传输到另一个组件，该组件需要是地址组件的子组件，这样子组件将接收地址组件状态作为props。

这就是为什么人们使用Redux，它创建容器并将您的所有状态存储在该容器中，然后可以由项目中的任何组件访问。https://react-redux.js.org/

但是如果您的组件不相关，并且您不想使用redux，那么有一种方法可以做到这一点通过异步存储将状态值保存到存储

https://github.com/react-native-async-storage/async-storage

，然后通过AsyncStorage在Main Component中检索这些值。