如何在调用 API 时使用状态

Question

我尝试在我的代码 React Native 中插入一个示例 API，我想在我的 API 的 link 中使用一个状态，但它不起作用。用户在 TextInput 中输入一个 CP，然后将其保存在状态中，然后我想将该 CP 状态放入 link

你能帮我吗:

import React, {useState, useEffect} from 'react';
import { SafeAreaView, Text, View, StyleSheet, TextInput, TouchableOpacity, Picker } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


export default function Localisation({ navigation }) {

  const [CP, setCP]= React.useState('3');
  const [city, setCity]= React.useState('');
  const [ListVille, setList]= React.useState([]);

  useEffect( () => {
    getCities()
  }, []);

  const getCities = () => {
    fetch('https://reqres.in/api/users/CP/').then(function(response) {
      return response.json()
    }).then(function(response){
      setList(response.data)
      console.log(response.data)
      console.log(Array.isArray(response.data))
    })
  }

  return (
  <SafeAreaView style={styles.plus}>
    <Text> Saisissez votre code postal. </Text>
    <TextInput style={styles.input} value={CP} placeholder='Code postal' onChangeText={text => setCP(text)}  keyboardType='number-pad'/>
    <Text> Selectionner la commune de votre choix  </Text>
    <Picker selectedValue={city}
      onValueChange={(itemValue) => setCity(itemValue)} 
      placeholder={{label: 'Choisissez une ville', value: null, color: '#9EA0A4',}}>
      { Array.isArray(ListVille) ? ListVille.map((item, key)=>( <Picker.Item label={item.first_name} value={item.first_name} key={key} />) ) : ListVille===undefined ?  <Picker.Item label={''} value={'pas de ville'} /> : <Picker.Item label={ListVille.first_name} value={ListVille.first_name} /> }
    </Picker>
    
    <View style={{alignItems: "center",}}>
      <TouchableOpacity onPress={() => { navigation.navigate('Ma simulation', {ville: city} ) }} style={styles.button} >
        <Text> Valider </Text>
      </TouchableOpacity>
    </View>
  </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  plus: {
    margin:10,
  },

  input: {
    backgroundColor:'white',
    borderWidth: 0.5,
    borderColor:'#C5C5CC',
    borderRadius: '10px',
    marginBottom:20,
    marginTop: 10,
    marginLeft:5,
    color: '#616161',
    width: '98%',
    height: 40,
    padding: 10,
  },

  button: {
    backgroundColor: '#92D050',
    boxSizing: 'border-box',
    borderRadius: '10px',
    alignItems: "center",
    padding: 10,
    color: '#616161',
    width: '70%',
    marginLeft:20,
    marginTop:20,
  },
}); 

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    padding: 10,
    width:'98%',
    borderWidth: 0.5,
    borderColor: '#C5C5CC',
    borderRadius: 10,
    color: '#616161',
    alignItems: "center",
    marginTop: 10,
    marginLeft:5,
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});

/* pour plus tard quand on pourra choisir la ville
  const [CP, setCP]= React.useState('');

  <Text> Saisissez votre code postal. </Text>
  <TextInput style={styles.input} value={CP} placeholder='Code postal' onChangeText={text => setCP(text)}  keyboardType='number-pad'/>

  <Text> Selectionner la commune de votre choix </Text>
  <TextInput style={styles.input} value={city} placeholder='Ville' onChangeText={text => setCity(text)}  />


  
*/

我试过了：

当我输入这样的数字时：

https://reqres.in/api/users/3 API 有效，所以这不是 API 问题

Answer 1

这只是一个字符串：

'https://reqres.in/api/users/CP/'

它可能包含与变量名相同的字符，但没有任何内容向 JavaScript 表明这不是字符串。

您正在寻找 template literal:

`https://reqres.in/api/users/${CP}/`

或者，在最坏的情况下，希望将一个变量连接成一个字符串：

'https://reqres.in/api/users/' + CP + '/'

如何在调用 API 时使用状态

How to use a state in a call to an API

javascript

reactjs

react-native