如何将数据从一个 React Native 组件共享到另一个组件 [英] How to share data from one react native component to another component
问题描述
我有一个组件地址"我是否正在使用 google-places-autocomplete 来获取地址.之后我提取了所需的数据(例如国家/地区、邮政编码等).现在我想将此数据传输到主要组件"中.在哪里被调用.在地址组件中,我使用了 useState() 来存储数据.
i have a component "Address" were i am using google-places-autocomplete for getting address.After that i extract the needed data (such as Country,postal code etc). And now i want to transfer this data into the "Main Component" for where the is getting called. In Address Component, i have used useState() to store data.
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;
这是我的代码,我想将数据 =city,state,postalcode,country 传输到另一个组件中
here's my code and i want to transfer data =city,state,postalcode,country into another component
推荐答案
要将数据传输到另一个组件,该组件需要是您的地址组件的子组件,这样子组件将收到地址组件状态为道具.
To transfer data , to another component , that Component will need to be the Child Component of your Address Component, in this way child component will receive Address Component states as props.
这就是人们使用 Redux 的原因,它创建容器并将您的所有状态存储在该容器中,然后您的项目中的任何组件都可以访问这些状态.https://react-redux.js.org/
That's why people use Redux, which creates container and stores all your states in that container, which then can be accessed by any component in your project. https://react-redux.js.org/
但是如果您的组件不相关,并且您不想使用 redux ,那么有一种方法可以做到这一点,您通过异步存储将您的状态值保存到存储中.
But if your components are not related, and you don't want to use redux , then there is one way to do this is, that you save your state value to the storage via Async Storage.
https://github.com/react-native-async-storage/异步存储
然后通过 AsyncStorage 在主组件中检索这些值.
and then retrieve those values in Main Component via AsyncStorage.
这篇关于如何将数据从一个 React Native 组件共享到另一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!