Javascript 将数据传递到react native中的模式

从api中提取的数据需要用于模式中的其他目的。如何传递数据：

{currency.data.prices[index].instrument}

{currency.data.prices[index].closeoutAsk}

{currency.data.prices[index].closeoutBid}

将组件中的数据传递给同一组件中的模式。代码如下：

//HomeScreen 
    import React, {useContext, useState} from 'react'
    import { Text, View, ScrollView, TouchableOpacity, Modal, TextInput } from 'react-native'
    import {ListItem, Card, Button, Icon} from 'react-native-elements'
    //import CurrencyPair from '../../CurrencyPair'
    import {firebase} from '../../../firebase/config'
    import {CurrencyContext} from '../../../context/Context'
    import styles from '../LoginScreen/styles'
    
    function HomeScreen() {
    
        const currency = useContext(CurrencyContext);
        const [modalopen, setModalOpen] = useState(false)
    
    
    return (
            <ScrollView>
              <Modal
              visible={modalopen}
              animationType={"fade"}
              >
                <View style={styles.modal}>
                  <View>
                    <Text style={{textAlign: "center", fontWeight: "bold"}}>
                    CreateAlert
                  </Text>
                  <TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
                    <Text style={styles.buttonTitle}>OK</Text>
                  </TouchableOpacity>
    
                  </View>
                  
                  
                </View>
    
              </Modal>
            <Card>
                <Text style={{textAlign: "center"}}>
                    Welcome
                </Text>
                <Button title="Sign Out" type="outline" onPress ={() => firebase.auth().signOut()}/>
                <Button title="My Alerts"  onPress ={() =>navigation.navigate("AlertScreen") }/>
                
            </Card>
    
            <View>
                {currency.data.prices && currency.data.prices.map((prices, index) => {
                    return (
          <ListItem
            key={index}
            onPress = {() => setModalOpen(true)}
            bottomDivider>
            <ListItem.Content>
                <ListItem.Title>
                  
                {currency.data.prices[index].instrument}        {currency.data.prices[index].closeoutAsk}         {currency.data.prices[index].closeoutBid}
                </ListItem.Title>
            </ListItem.Content>
          </ListItem>     
                    )
                })
    }
            </View>
       
        </ScrollView>
    )
    }
    export default HomeScreen

//主屏幕
从“React”导入React，{useContext，useState}
从“react native”导入{Text，View，ScrollView，TouchableOpacity，Modal，TextInput}
从“react native elements”导入{ListItem、卡片、按钮、图标}
//从“../../CurrencyPair”导入CurrencyPair
从“../../../firebase/config”导入{firebase}
从“../../../context/context”导入{CurrencyContext}
从“../LoginScreen/styles”导入样式
功能主屏幕（）{
const currency=useContext（CurrencyContext）；
const[modalopen，setModalOpen]=useState（false）
返回(
CreateAlert
setModalOpen（假）}>
好啊
欢迎
firebase.auth（）.signOut（）}/>
导航。导航（“AlertScreen”）}/>
{currency.data.prices&¤cy.data.prices.map（（价格，指数）=>{
返回(
setModalOpen（真）}
底部分隔器>
{currency.data.prices[index].instrument}{currency.data.prices[index].closeoutAsk}{currency.data.prices[index].closeoutBid}
)
})
}
)
}
导出默认主屏幕

//上下文

import React, {createContext, useState, useEffect}from 'react'
import {ActivityIndicator} from 'react-native'
import axios from '../utils/axios'

const CurrencyContext = createContext();

const CurrencyProvider =(props) => {
    const [data, setData] = useState([])
    const [isLoading, setIsloading] = useState(true)

    useEffect(() => {
        const interval = setInterval(() => {
            const fetchpairs = async() => {
                const results = await axios.get('/v3/accounts/101-004-14328428-002/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
                setData(results.data)
                setIsloading(false)
            }
            fetchpairs() 
        },1000)
      }, []);

      if(isLoading) {
        return (
            <ActivityIndicator size="large"/>
        )
    }else
    return (
        <CurrencyContext.Provider
        value={{
            data,
            setData,
            isLoading,
            setIsloading
        }}>
            {props.children}

        </CurrencyContext.Provider>

       
    )
}

export {CurrencyProvider, CurrencyContext}

import React，{createContext，useState，useffect}来自“React”
从“react native”导入{ActivityIndicator}
从“../utils/axios”导入axios
const CurrencyContext=createContext（）；
const CurrencyProvider=（道具）=>{
const[data，setData]=useState（[]）
常量[isLoading，setIsloading]=useState（真）
useffect（（）=>{
常量间隔=设置间隔（（）=>{
const fetchpairs=async（）=>{
const results=等待axios.get（3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/3/美元（加元%2美元（日元%2美元（瑞士法郎%2美元（南非兰特%2美元（墨西哥元））
setData（results.data）
setIsloading（错误）
}
fetchpairs（）
},1000)
}, []);
如果（孤岛加载）{
返回(
)
}否则
返回(
{props.children}
)
}
导出{CurrencyProvider，CurrencyContext}

您可以创建另一个状态变量来存储单击的索引

const [clickedIndex, setClickedIndex] = useState(0);

然后在onPress事件中使用它

onPress = {() => {setModalOpen(true);setClickedIndex(index);}

然后，您可以使用相同的索引来显示模式中所需的内容

         <Modal
          visible={modalopen}
          animationType={"fade"}
          >
            <View style={styles.modal}>
              <View>
                <Text style={{textAlign: "center", fontWeight: "bold"}}>
                {currency.data.prices[clickedIndex].instrument}
              </Text>
              <TouchableOpacity style={styles.button} onPress={() => setModalOpen(false)}>
                <Text style={styles.buttonTitle}>OK</Text>
              </TouchableOpacity>
              </View>
            </View>
          </Modal>

{currency.data.prices[clickedIndex].instrument}
setModalOpen（假）}>
好啊

您可以将其发送到

模式

的方式与发送到其下方的

视图

组件的方式相同。尝试过。这意味着所有api数据都将显示在

模式

中，但我希望模式中显示的唯一数据是选中的数据。这是在

设置模式打开（true）之后

被调用。您可以在setmodal之前将所选索引/项保存为状态，然后将其传递给modal。如何完成？如果您可以将其标记为答案，那将非常好。谢谢：）