Reactjs Ref与我构建的功能组件不正常工作

我基于react-native-24h-timepicker构建了一个简单的组件，我正在使用钩子、上下文API和函数组件。当我试图将ref分配给一个名为pickerRef的变量，并使用该变量调用Picker函数时，出现了一个问题，根本不调用Picker函数

当我在屏幕上尝试两次使用我的组件时，我单击了两个组件中的任何一个，picker出现，当我选择任何值时，它只影响渲染的最后一个组件的值，即使我单击了第一个组件，它也只影响最后一个组件

以下是代码片段：

import React, { useState, useEffect } from 'react';
import { Text, View, TextInput, Dimensions, ScrollView, I18nManager } from 'react-native';
import Picker from "react-native-24h-timepicker";
import {Entypo} from '@expo/vector-icons';

//Get width of mobile screen
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;

const TimePicker = (props) => {
    let {
        onChangeText,
        style,
        timeTextStyle,
        iconColor,
        iconSize
    } = props;
    let pickerRef = null;
    const [time, setTime] = useState('00:00');

    useEffect(() => {
        onChangeText(time);
    },
    [time])

    onCancel = () => {
        pickerRef.close();
    }

    onConfirm = (hour, minute) => {
        setTime(`${hour<10? `0`+hour : hour}:${minute}`);
        pickerRef.close();
    }

    return (
        <View>
            <View style={{...styles.textField, ...style}}>
                <Text style={{...styles.timeText, ...timeTextStyle}} onPress={() => pickerRef.open()}>{time}</Text>
                <Entypo name='select-arrows' color={iconColor} size={iconSize}/>
            </View>
            <Picker
                ref={(ref) => {
                    pickerRef = ref;
                }}
                onCancel={() => onCancel()}
                onConfirm={(hour, minute) => onConfirm(hour, minute)}
            />
        </View>
    );
}

export default TimePicker;

TimePicker.defaultProps = {
    iconColor: '#0a5ba3',
    iconSize: 15
}

const styles = {
    textField: {
        flexDirection: 'row', 
        alignSelf: 'flex-start', 
        borderRadius: 8, 
        borderWidth: 1, 
        borderColor: '#bdc3c7', 
        padding: 10
    },
    timeText: {
        fontSize: 16, 
        color: '#0a5ba3'
    }
}

import React，{useState，useffect}来自“React”；
从“react native”导入{Text，View，TextInput，Dimensions，ScrollView，I18nManager}；
从“react-native-24h-timepicker”导入选择器；
从“@expo/vector icons”导入{Entypo}；
//获取移动屏幕的宽度
变量宽度=维度。获取（“窗口”）。宽度；
变量高度=尺寸。获取（“窗口”）。高度；
常量时间选择器=（道具）=>{
让{
一旦更改文本，
风格
timeTextStyle，
iconColor，
意识到
}=道具；
设pickerRef=null；
const[time，setTime]=useState（'00:00'）；
useffect（（）=>{
onChangeText（时间）；
},
[时间]）
onCancel=（）=>{
pickerRef.close（）；
}
onConfirm=（小时、分钟）=>{
设置时间（`${hour{time}
{
pickerRef=ref；
}}
onCancel={（）=>onCancel（）}
onConfirm={（小时，分钟）=>onConfirm（小时，分钟）}
/>
);
}
导出默认时间选择器；
TimePicker.defaultProps={
iconColor:“#0a5ba3”，
iconSize:15
}
常量样式={
文本字段：{
flexDirection:'行'，
alignSelf:“灵活启动”，
边界半径：8，
边框宽度：1，
边框颜色：'#bdc3c7'，
填充：10
},
时间文本：{
尺寸：16，
颜色：“#0a5ba3”
}
}

---

根据我的理解，复制组件时可能会忘记更改第二个组件的ref变量名

解决方案：

---

创建单独的ref变量名“pickerRef1”和“pickerRef2”，并根据需要切换状态。

React ref是这样创建的

let pickerRef = React.createRef() 

分配引用

<Picker
      ref={pickerRef }
       onCancel={() => onCancel()}
      onConfirm={(hour, minute) => onConfirm(hour, minute)}
/>

---

你能邮寄世博会点心吗？

pickerRef.current.close()