下拉值未显示在 React.js 中

Question

我正在研究一个地理计算器，我遇到了一个关于 select 的下拉菜单的问题，从英里到公里的转换，反之亦然。 度数到密耳也是如此。 每当我尝试使用菜单时，它们什么都不做。 我不确定我应该如何声明文本。 有人告诉我它在我的下拉列表中应该是这样的：

        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            onChangeText = {(text) => setDistPick(distPick)}
            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            onChangeText = {(text) => setBearingPick(bearingPick)}
            /> 
      </Padder>

这就是我目前对整个文件的看法：

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, Keyboard, View } from "react-native";
import { Input, Button } from "react-native-elements";
import Padder from "../components/Padder";
import { Dropdown } from "react-native-material-dropdown";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Feather } from '@expo/vector-icons';

const Settings = ({ navigation, route }) => {


    const [distPick, setDistPick] = useState({distPick: ['Kilometers', 'Miles']});
    const [bearingPick, setBearingPick] = useState({bearingPick: ['Degrees', 'Mils']});


    navigation.setOptions({
        headerLeft: () => (
            <TouchableOpacity onPress = {() => navigation.navigate('CalculatorScreen')}>
                <Feather style={{ marginRight: 10 }} name="trash" size={24} />
                </TouchableOpacity>

        ),
        headerRight: () => (
            <TouchableOpacity onPress={() => {
                navigation.navigate('CalculatorScreen', {distPick, bearingPick});
            }}>
                <Feather style={{ marginRight: 10 }} name="save" size={24} />
            </TouchableOpacity>
        ),
    });

    return(
        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            onChangeText = {(text) => setDistPick(text)}
            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            onChangeText = {(text) => setBearingPick(text)}
            /> 
      </Padder>
    );
}

const styles = StyleSheet.create({
    header: {
        textAlign: 'center',
        backgroundColor: "#0098c7",
        color: 'white',
        fontSize: 25
    },
});

export default Settings;

我知道目前顶部有很多不必要的导入，但这是另一个原因。 如果您有任何建议，我将不胜感激。

PS - 如果您知道为什么我的保存和取消导航按钮不起作用，建议也将不胜感激。

Answer 1

这似乎正在发生，因为您不是分配下拉列表数据

除此之外：

const [distPick, setDistPick] = useState({distPick: ['Kilometers', 'Miles']});
const [bearingPick, setBearingPick] = useState({bearingPick: ['Degrees', 'Mils']});

添加这个：

const [distPickData, setDistPickData] = useState(['Kilometers', 'Miles']);
const [bearingPickData, setBearingPickData] = useState(['Degrees', 'Mils']);

然后将下拉列表的数据设置为

<Dropdown
        label = 'Distance Type'
        value = {distPick}
        onChangeText = {(text) => setDistPick(text)}
        data={distPickData}
        />...

并将所选值设置为另一个变量而不是相同的变量。

问候。

Answer 2

这是工作程序的更新后的最终代码。 我最初没有的一个附加功能是将传递参数添加到另一个屏幕。 数据最终需要放入一个数组中，如下所示。

    const initialDistPick = route.params.distPick;
    const initialBearingPick = route.params.bearingPick;
    const [distPick, setDistPick] = useState(initialDistPick);
    const [bearingPick, setBearingPick] = useState(initialBearingPick);
    const dUnits = [
        {value: 'Miles',},
        {value: 'Kilometers',},];
    const bUnits = [
        {value: 'Degrees',},
        {value: 'Mils',},];

    return(
        <Padder>
            <Dropdown
            label = 'Distance Type'
            value = {distPick}
            data = {dUnits}
            onChangeText = {(text) => setDistPick(text)}

            />
            <Dropdown
            label = 'Navigational Type'
            value = {bearingPick}
            data = {bUnits}
            onChangeText = {(text) => setBearingPick(text)}

            /> 
      </Padder>
    );
}