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

setvSuburb不是数组。这是一个功能。
您正在映射功能而不是数据。
您应该在<Picker.item>周围使用括号。
您将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'
      },
    ];

我们使用地图打印列表：

 <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]}'} />
   }
  )
 }

我希望这会对您有所帮助

使用带有钩子的React Native Picker

2 个答案: