React中如何结合用户输入更新API请求URL并获取数据？

Hey Adi, let's break this down step by step since you're new to React—no need to stress! 😊

1. 处理用户输入与API请求的正确姿势 #

首先，你不需要依赖组件接收新props来触发请求（除非这个城市名是从父组件传过来的）。对于用户自己输入的内容，我们应该用React的**状态（State）**来管理输入值，然后在合适的时机发起API请求。这里有两种常见的方式：

方式一：用户输入时自动触发请求（实时搜索）

用useState存输入的城市名，再用useEffect监听这个状态的变化，一旦城市名改变就发起请求：

import { useState, useEffect } from 'react';

function CityDataApp() {
  // 存储用户输入的城市名
  const [cityName, setCityName] = useState('');
  // 存储API返回的数据
  const [apiData, setApiData] = useState(null);
  // 存储请求错误信息
  const [error, setError] = useState(null);

  // 监听cityName变化，发起请求
  useEffect(() => {
    // 避免空字符串触发无效请求
    if (!cityName.trim()) return;

    // 封装请求函数
    const fetchData = async () => {
      try {
        // 注意用encodeURIComponent处理城市名，避免特殊字符破坏URL
        const response = await fetch(`https://your-api-url.com/data?city=${encodeURIComponent(cityName)}`);
        if (!response.ok) throw new Error('请求失败，请稍后重试');
        
        const data = await response.json();
        setApiData(data);
        setError(null); // 请求成功时清空错误
      } catch (err) {
        setError(err.message);
        setApiData(null); // 请求失败时清空数据
      }
    };

    fetchData();
  }, [cityName]); // 依赖项：只有cityName变化时才重新执行

  return (
    <div>
      <input
        type="text"
        value={cityName}
        onChange={(e) => setCityName(e.target.value)}
        placeholder="输入城市名"
      />

      {/* 错误提示 */}
      {error && <p style={{ color: 'red' }}>{error}</p>}

      {/* 展示返回的数据 */}
      {apiData && (
        <div>
          <h3>城市数据：</h3>
          <pre>{JSON.stringify(apiData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default CityDataApp;

方式二：点击按钮手动触发请求（更可控）

如果不想每次输入都发起请求（比如减少API调用次数），可以把请求逻辑放在按钮的点击事件里：

// ...（状态定义和上面一样）

const fetchData = async () => {
  if (!cityName.trim()) {
    setError('请输入有效的城市名');
    return;
  }
  try {
    const response = await fetch(`https://your-api-url.com/data?city=${encodeURIComponent(cityName)}`);
    // ...（和上面一样的请求处理逻辑）
  } catch (err) {
    setError(err.message);
  }
};

// 在JSX里添加按钮
<button onClick={fetchData}>获取数据</button>

2. 关于react-router的疑问 #

完全不需要用到react-router！
react-router是用来处理React应用的页面路由跳转的（比如从首页跳转到详情页），而你现在的需求是在同一个组件内处理输入和请求数据，和路由完全无关。先不用着急学这个，把状态管理和API请求的基础搞扎实就好。

额外小提示 #

• 永远记得用encodeURIComponent处理URL中的用户输入，避免空格、中文或特殊字符导致URL格式错误。
• 一定要处理请求失败的情况，给用户清晰的错误提示，提升体验。
• 如果你的组件是类组件（而不是函数组件），可以用this.state管理状态，用componentDidUpdate监听状态变化来发起请求，但现在React官方更推荐函数组件+hooks的写法。

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