如何将数据从一个 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屋！