如何在 React Native 功能组件中制作动态选择器？

如何解决如何在 React Native 功能组件中制作动态选择器？

我必须完成一些创建动态选择器选项的任务。但是我在互联网上尝试了一些选项，大多数选项都是使用类组件来解释的。但我需要使用功能组件。创建选择器的目的是通过名称选择产品。（因此选择器在标签上注明其名称）。但在这里面，我需要使用所选产品的 ID 来调用 post 请求，而不是它的名称。因此，从选择器中选择选项（作为产品名称）时，我还需要获取产品 ID 作为输入。

以下是 productDetails 终于进入控制台。

  {"data": [{"accountCoordinatorEmail": null,"category": "edu","createdAt": null,"createdBy": null,"customerEmail": "[e-mail]","modifiedAt": null,"modifiedBy": null,"productID": 111,"productName": "e-School","projectManagerEmail": null},

例如，我需要发布 productID = 111 作为输入，同时从选择器中选择 productName 作为电子学校。我应该如何实施。我在类组件示例中看到了一些映射函数。但我无法从类组件中理解。

import React,{useEffect,useState} from 'react';
import {View,StyleSheet} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import AsyncStorage from '@react-native-community/async-storage';


const ProductPicker = () => {
    const [selectedValue,setSelectedValue] = useState('');
    const [productDetails,setproductDetails] = useState([]);

    useEffect(() => {
        getProductList();
    },[]);

    const getProductList = async () => {
         const token = await AsyncStorage.getItem('userToken');

        fetch("http://10.0.2.2:3000/customer/get-all-products",{

            method: "post",headers: {
                'Content-Type': 'application/json','Authentication': `Bearer ${token}`
            },})
            .then((response) => response.json())
            .then((json) => setproductDetails(json.data))
            .catch((error) => console.error(error))

    };

    return (
        <View style={styles.container}>
            <Picker
                selectedValue={selectedValue}
                style={{height: 40,width: 150}}
                onValueChange={(itemValue,itemIndex) => {
                    setSelectedValue(itemValue);
                }}
            >
                
            </Picker>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,paddingTop: 40,alignItems: 'center',},});

export default ProductPicker;

解决方法

根据文档 (https://github.com/react-native-picker/picker)：

您需要 <Picker.item> 个子组件来呈现列表。在这里你会看到地图功能。一种方法是将功能组件渲染为父 <Picker> 组件的子组件。

以下假设（如您的代码所暗示的那样）您希望将完整产品对象设置为选定值，之后您可以提取 productID。如果您明确只想设置 productID，则需要将 product.productID 传递给 <Picker.item> 组件的 value 属性，并添加一个函数以将完整的产品对象传递给父 {{1} 的 selectedValue 属性} 组件。

<Picker>