如何在呼叫API時使用狀態

我嘗試在我的代碼 React Native 中插入一個示例 API，我想在我的 API 的鏈接中使用一個狀態，但它不起作用。用戶在 TextInput 中輸入 CP，然后將其保存在狀態中，然后我想將該 CP 狀態放入鏈接中

你能幫助我嗎 ：

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/CP/
• https://reqres.in/api/users/CP/
• https://reqres.in/api/users/{CP}
• https://reqres.in/api/users/${CP}

當我輸入一個數字時：

• https://reqres.in/api/users/3 API 有效，所以這不是 API 問題

uj5u.com熱心網友回復：

這只是一個字串：

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

它可能包含與變數名相同的字符，但沒有任何東西向 JavaScript 表明這不是字串。

您正在尋找模板文字：

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

或者，在最壞的情況下，希望將一個變數連接成一個字串：

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

標籤：javascript 反应 反应式

上一篇：ReactbackgroundImage不會顯示在手機上，但會顯示在網路上

下一篇：ReactNativesetState添加陣列的最后一項