React Native如何在API调用的请求链接中使用state状态值

常见错误写法原因 #

之前试的几种写法不生效，基本都是JS字符串语法用错导致的：

• 直接拼接CP：URL里直接写CP会被识别为普通字符串，不会读取状态变量的值
• 拼接{CP}：单/双引号包裹的字符串里写{CP}不会做变量解析，会直接把{CP}三个字符拼到URL里，这是JSX标签内的插值语法，不能在普通JS字符串里用
• 拼接${CP}不生效：90%概率是你用了单引号/双引号包裹整个URL，而不是模板字符串要求的反引号，这种情况下${CP}也会被当成普通字符处理

其他高频踩坑点 #

除了语法错误，这几个问题也会导致拼接失效：

• 状态异步更新问题：如果你在调用setCP更新CP状态的代码后立刻同步发请求，拿到的会是更新前的旧值（React状态更新是异步批处理的），如果CP初始值是空字符串，拼出来的URL自然不对
• 状态存储错误：TextInput的onChangeText回调没有正确把输入值传入setCP，导致CP状态始终是初始值，和用户输入的内容不同步
• 输入值带冗余字符：用户输入的内容首尾带空格、换行，拼到URL里之后路径不符合接口要求，请求就会失败

正确实现代码 #

import { useState, useEffect } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

export default function CpRequestDemo() {
  const [CP, setCP] = useState('');

  // 请求方法
  const getApiData = async () => {
    // 先处理输入值，去掉首尾空白，做非空校验
    const validCp = CP.trim();
    if (!validCp) {
      Alert.alert('提示', '请先输入邮政编码');
      return;
    }

    try {
      // 重点：整个URL必须用反引号`包裹，才能识别${}变量插值
      const response = await fetch(`https://reqres.in/api/users/${validCp}`);
      const result = await response.json();
      console.log('接口返回结果：', result);
      // 后续处理返回数据逻辑
    } catch (error) {
      console.error('请求失败：', error);
    }
  };

  // 如果需要输入完自动触发请求，用useEffect监听CP变化，不要在setCP后立刻同步调用请求
  // useEffect(() => {
  //   if (CP.trim()) getApiData()
  // }, [CP])

  return (
    <View style={{padding: 20}}>
      <TextInput
        style={{height: 40, borderWidth: 1, paddingHorizontal: 10, marginBottom: 20}}
        placeholder="请输入邮政编码"
        value={CP}
        // 正确同步输入值到状态
        onChangeText={inputText => setCP(inputText)}
      />
      <Button title="查询数据" onPress={getApiData} />
    </View>
  );
}

快速排查步骤 #

1. 请求前加打印：在发请求的代码前加console.log('当前CP值：', CP, '拼接后URL：', https://reqres.in/api/users/${CP.trim()})，先确认状态值和拼接后的URL符合预期
2. 检查字符串包裹符：确认URL外层是反引号（键盘左上角和~同位置的按键输出的符号），不是单引号、双引号
3. 校验取值时机：不要在setCP的下一行直接调用请求方法，要么在用户点击按钮时取最新的CP值发请求，要么用useEffect监听CP变化后再触发请求

内容的提问来源于stack exchange，提问作者Aliénor