如何将数据从一个 React Native 组件共享到另一个组件

问题描述

我有一个组件“地址”，我正在使用 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",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%",}
});

export default Address;

这是我的代码，我想将数据 =city,state,postalcode,country 传输到另一个组件中

解决方法

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

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

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

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

然后通过 AsyncStorage 在主组件中检索这些值。