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

Question

我必须完成一些创建动态选择器选项的任务。但我在互联网上尝试了一些选项，大多数选项都是使用 class 组件解释的。但是我需要使用功能组件。创建选择器的目的是根据名称 select 产品。（因此选择器在标签上注明其名称）。但在其中，我需要使用 selected 产品的 ID 调用 post 请求，而不是它的名称。因此，当 select 从选择器中选择一个选项（作为产品名称）时，我还需要获取产品 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},

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

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> 个子组件来呈现列表。这是您应该看到 map 函数的地方。一种方法是将功能组件呈现为父组件 <Picker> 的子组件。

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

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

How to make dynamic picker in react native functional component?

mapping

post

dynamic

picker

react-native