React Native：有没有办法将选择器重置为初始状态？

Question

Is there a way to reset the picker to the initial state in which it was first displayed when I clicked on the onChangeCheckbox? In my example I show the checkbox and also the picker and I need to just display the initial information that was in the picker when I entered the screen.

THIS IS THE CHECKBOX

const onChangeCheckbox = (n, newValue, item) => {
    console.log('onChangeCheckbox n,newValue: ', n, newValue);
    const newArray = [...checkboxDisplay];
    newArray[n] = !checkboxDisplay[n]; // refresh available device
    setCheckboxDisplay(newArray);
    const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, deviceTypeSelected[n],item, newValue);
    resetNumberAndDegem(n, aSerialArray);
  };

THIS IS THE PICKER

function ElementDeviceType(props) {
    const index = props.index;
    const item = props.item;
    const color = deviceTypePickerEnable[index] ? 'white' : 'gray';
    return (
      <View style={styles.deviceTextView}>
        <Text style={[styles.label1, { color: color }]}>device:</Text>
        <View style={styles.deviceBoxView}>
          <Picker
            mode="dropdown"
            enabled={deviceTypePickerEnable[index]}
            selectedValue={deviceTypeSelected[index]}
            style={styles.devicePicker}
            onValueChange={(newValue) => onChangeDeviceType(index, newValue,item)}
          >
    <Picker.Item label="choose device" value="" enabled={false} color={'#ddd'} itemStyle={{
                                                color: '#ccc'
                                            }} />
            {deviceTypeDisplayed[index].map((elem, i) => (
              <Picker.Item
                label={getDeviceTestName(elem)}
                value={elem}
                key={i}
              />
            ))}
          </Picker>
        </View>
      </View>
    );
  }

THIS IS THE onChangeDeviceType FUNCTION OF THE PICKER

const onChangeDeviceType = (n, newDeviceType,item) => {
    console.log('onChangeDeviceType n,newDeviceType,item:', n, newDeviceType,item);
    if(newDeviceType != ''){
    const newATyperray = [...deviceTypeSelected];
    newATyperray[n] = newDeviceType;
    setDeviceTypeSelected(newATyperray);
    
    const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, newDeviceType,item,checkboxDisplay[n]) ;
    
    const deviceArrayS = [...deviceNumberSelected];
    deviceArrayS[n] = aSerialArray[0]; // set the selected serial to the 1st available
    onChangeDeviceNumber(n, aSerialArray[0],item);
    updateAllInputs(
      UPDATE_TYPE.DEVICE_TYPE,
      newATyperray,
      deviceArrayS,
      serialBoolArray
    );
    }
  };

Answer 1

You can do it with the help of react-native hooks.

Here is an example code for your reference : https://thewebdev.info/2021/02/05/how-to-reset-to-initial-state-with-react-hooks/