React使用fetch API无法将输入文本插入URL参数如何解决？

核心问题 #

• 输入框未绑定onChange事件，你定义的handleChange函数从未触发，state.myValue始终是空值
• setState是异步更新逻辑，调用后立刻读取state拿到的是更新前的旧值
• 模板字符串必须用反引号 ` 包裹，你使用单引号'包裹URL，导致${}插值语法失效
• console.log放置位置错误，无法拿到更新后的state值

修复方案（推荐受控组件写法，符合React规范） #

步骤1：给输入框绑定onChange事件 #

给TextField组件新增onChange={this.handleChange}属性，让用户输入内容实时同步到state.myValue

步骤2：修改fetch请求的URL写法 #

用反引号包裹URL，通过${}插入编码后的城市参数

步骤3：调整异步逻辑顺序，避免异步问题 #

不需要在点击事件里重复给myValue赋值，直接读取已经同步好的state.myValue即可

修正后的核心代码 #

// 点击查询的逻辑
showRefContent = () => {
  // 直接取已经实时同步的输入值，不需要重复setState
  const uriEncodedCity = encodeURIComponent(this.state.myValue.trim());
  // 空值判断，避免无效请求
  if (!uriEncodedCity) return;
  // 用反引号包裹URL，实现变量插值
  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${uriEncodedCity}&appid=***`)
    .then(response => response.json())
    .then(data => {
      this.setState({
        temp: data.main.temp
        // setState第二个参数是回调，状态更新完成后才会执行，这里才能拿到最新的temp
      }, () => console.log(this.state.temp))
    })
}

// render里的TextField修改
<TextField
  inputRef={this.textInput}
  id="demo-helper-text-misaligned-no-helper"
  label="City name"
  onChange={this.handleChange} // 新增这行绑定onChange事件
/>

可选方案（保留ref的写法） #

如果你不想用受控组件，也可以直接用ref拿输入框的值，不需要走handleChange的状态同步：

showRefContent = () => {
  const inputCity = this.textInput.current.value.trim();
  if (!inputCity) return;
  const uriEncodedCity = encodeURIComponent(inputCity);
  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${uriEncodedCity}&appid=***`)
    .then(response => response.json())
    .then(data => {
      this.setState({
        temp: data.main.temp,
        myValue: inputCity
      }, () => console.log(this.state.temp))
    })
}

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