根据其他值更改Formik选择器选项-React Native

Question

我正在尝试根据用户为state选择的内容来更改country的选择器选项。现在我有两个分别对应于加拿大和美国的数组。我正在使用props.values.country.map将数组映射到选择器项，但是得到undefined is not a function。当我将props.values.country替换为CA或US时，选择器项会正确映射。如何调用国家/地区值，以便可以动态更改第二个选择器

  var CA = ['Alberta'];
  var US = [];
  return (
    <View style={styles.container}>
      <Formik
        initialValues={{
          state: '',
          country: '',
        }}
        // Form submission action
        onSubmit={async (values) => {
          addData(values);
        }}>
        {(props) => (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1, width: '100%'}}>
            <ScrollView style={styles.inner}>
              <Picker
                selectedValue={props.values.country}
                onValueChange={props.handleChange('country')}
                style={styles.input}>
                <Picker.Item label="Canada" value="CA" />
                <Picker.Item label="USA" value="US" />
              </Picker>
              <Picker
                selectedValue={props.values.state}
                onValueChange={props.handleChange('state')}
                style={styles.input}>
                {props.values.country.map((item, index) => {
                  return <Picker.Item label={item} value={index} key={index} />;
                })}
              </Picker>
              <View style={[{width: '90%', margin: 10, alignSelf: 'center'}]}>
                <Button
                  title="place order"
                  color="maroon"
                  onPress={props.handleSubmit}
                  style={{padding: 3, width: '80%'}}
                />
              </View>
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </Formik>