使用帶有鈎子的 React Native Picker

Question

嗨，我的選擇器有問題，我需要在我的選擇器中打印一個選項列表，但我無法使用鈎子使其工作，我的地圖功能有問題

這是我的代碼

   const [vZipCode, setvZipCode] = useState('');
  const [vState, setvState] = useState('Estado');
  const [vCity, setvCity] = useState('Ciudad');
  const [vSuburb, setvSuburb] = useState('Colonia');


const getAddres = ({vZipCode}) => {
axios.post(`http://exitusdesarrollo.eastus2.cloudapp.azure.com/AppForceControllers/controllers/GetAddressController.php`, {vZipCode})
    .then(res => {
      console.log(res.data.state);
      console.log(res.data.city);
      console.log(res.data.suburbs);
      setvState(res.data.state);
      setvCity(res.data.city);
      setvSuburb(res.data.suburbs);
    })
}

return (

    <View>
        <TouchableOpacity 
            style={ styles.logout}  
            onPress={() => getAddres({vZipCode})}>  
            <Text style={styles.loginText}>Obtener Ubicacion</Text>
        </TouchableOpacity>

        <View style={styles.ocointainer}>
            <View style={styles.pickcontainer}>
            <Picker style={styles.pick} 
                    selectedValue={vSuburb}
                    onValueChange={newvSuburb => setvSuburb(newvSuburb.toUpperCase())}
            >          
            {setvSuburb.map((item,index)=> {
                return <Picker.Item 
                            key={index} 
                            label = {'${item.name}'} 
                            value = {'${item.name}'} />
                }
                )
            }
                </Picker>
                <TouchableOpacity style={styles.inputIcon}  >
                <Image  source={require('../assets/Flecha.png')}/>
                </TouchableOpacity>
            </View>
        </View>
    </View>

這是 setvSuburb 的數組

suburbs":[{"0":"Burócrata"},{"1":"El Cielo"},{"2":"Privada de Cortez Residencial"},{"3":"La Aurora"},{"4":"Loma Linda"},{"5":"Aeropuerto"},{"6":"Campo de Tiro"}]

任何幫助，將不勝感激

Answer 1

1. setvSuburb不是數組。 這是一個函數。
2. 您正在映射您的功能，而不是您的數據。
3. 您應該在<Picker.item>周圍使用括號。
4. 您將vSuburb初始化為字符串。 它應該是一個空數組。

看看這是否有幫助：

{vSuburb.map((item,index) => {
    return (
        <Picker.Item
            key={index} 
            label = {'${item.name}'} 
            value = {'${item.name}'}
        />
    );
}

還有這個：

const [vSuburb, setvSuburb] = useState([]);

Answer 2

您需要返回<Picker.Item /> 。

假設我們有這個數組：

const suburbs = [
      {
        "0": 'Burócrata'
      },
      {
        "1": 'El Cielo'
      },
      {
        "2": 'Privada'
      },
    ];

我們使用 map 打印一個列表：

 <Picker style={styles.pick} 
         selectedValue={vSuburb}
         onValueChange={newvSuburb => setvSuburb(newvSuburb.toUpperCase())}
 >          
 {suburbs.map((item,index)=> {
     return <Picker.Item 
               key={index} 
               label = {'${item[index]}'} 
               value = {'${item[index]}'} />
   }
  )
 }

我希望這能幫到您