javascript - 使用带有钩子的反应原生选择器

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"}]

任何帮助，将不胜感激

标签： javascriptreactjsreact-native

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([]);