React Native中如何通过用户输入生成API请求的动态URL路径

嘿，我一眼就看出问题出在哪了！你把用户输入存在了组件的state里，但在生成URL的时候直接引用了UserInput变量——这个变量只在onChangeText的回调函数内部有效，在外部作用域根本找不到它，所以才会报“Can't find variable: UserInput”的错误。

你需要从组件的state中获取用户输入的值，也就是用this.state.UserInput来替代直接写UserInput。下面给你两种可行的写法：

方法1：字符串拼接（适配你的原生JS习惯） #

// 在发起请求的函数里这样写
const userstock = this.state.UserInput;
const path = "https://api.trading.com/1.0/stock/";
const end = "/company";
const url = path + userstock + end;
// 然后用这个url发起请求，比如fetch(url)...

方法2：ES6模板字符串（更简洁） #

模板字符串的写法本身没问题，只是你没正确引用state里的值，改成这样就可以了：

const url = `https://api.trading.com/1.0/stock/${this.state.UserInput}/company`;

完整示例：添加一个触发请求的按钮 #

为了让你更清楚，这里给你一个包含按钮触发请求的完整组件片段：

constructor(props) {
  super(props)
  this.state = { UserInput: '', }
  // 绑定函数上下文
  this.fetchStockData = this.fetchStockData.bind(this);
}

fetchStockData() {
  // 先判断用户是否输入了内容，避免无效请求
  if (!this.state.UserInput.trim()) {
    alert('请输入股票代码！');
    return;
  }
  const url = `https://api.trading.com/1.0/stock/${this.state.UserInput}/company`;
  // 发起API请求
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log('获取到的数据：', data);
      // 这里可以处理返回的数据，比如更新state展示到界面上
    })
    .catch(error => {
      console.error('请求出错：', error);
    });
}

render() {
  return (
    <View>
      <TextInput 
        onChangeText={(UserInput) => this.setState({UserInput})} 
        value={this.state.UserInput}
        placeholder="输入股票代码，比如msft"
      />
      <Text>{this.state.UserInput}</Text>
      <Button title="获取股票信息" onPress={this.fetchStockData} />
    </View>
  );
}

另外提醒你一下：如果你的组件是函数式组件（不过你用了constructor，应该是类组件），那获取state的方式会不一样，但你现在用的是类组件，所以用this.state.UserInput就对了。

内容的提问来源于stack exchange，提问作者blacksun