如何在反应原生功能组件中制作动态选择器？

Question

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

下面是productDetails终于登陆控制台了。

  {"data": [{"accountCoordinatorEmail": null, "category": "edu", "createdAt": null, "createdBy": null,
     "customerEmail": "c@gmail.com", "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;

Answer 1

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

您需要<Picker.Item> 子组件来呈现列表。这是您会看到地图功能的地方。一种方法是将功能组件作为子组件呈现给父 <Picker> 组件。

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

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))

  };

  const renderProductList = () => {
    return productDetails.map((product) => {
      return <Picker.Item label={product.productName} value={product} />
    })
  }

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

      </Picker>
    </View>
  );
};

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

export default ProductPicker;