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

Posted 2023-02-25

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

【英文标题】：How to make dynamic picker in react native functional component?

【发布时间】：2021-04-03 02:36:26

【问题描述】：

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

【参考方案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;