React对接Spring @GetMapping接口实现数据交互问题求助

1. 当前实现思路是否可行？需要调整吗？ #

你的思路完全可行：React前端收集用户输入，通过GET请求把参数传给Spring Controller，后端返回JSON后前端解析展示，这是前后端分离Web应用的标准模式之一。

需要调整的细节点：

• 确保前端输入是受控组件：用React状态管理输入框的值，这样提交时能准确获取到用户输入的city、state、country。
• 补充错误处理：请求可能失败（比如网络问题、后端报错），要捕获异常并提示用户，避免前端卡死。
• GET请求的参数拼接要规范：可以用URLSearchParams来构建查询参数，避免手动拼接字符串出现编码问题。

2. 如何获取响应中的所有字段？ #

不管用fetch还是axios，拿到后端返回的JSON后，直接就能访问所有字段。举个例子：
用fetch的话：

fetch(`/api/air-quality?${new URLSearchParams({ city, state, country })}`)
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json(); // 把响应转成JSON对象
  })
  .then(data => {
    // 这里data就是包含date、no2、pm10、pm2_5的对象
    console.log(data.date, data.no2, data.pm10, data.pm2_5);
    // 也可以用解构赋值一次性取出所有字段
    const { date, no2, pm10, pm2_5 } = data;
  })
  .catch(err => alert(err.message));

用axios的话更简洁：

axios.get('/api/air-quality', {
  params: { city, state, country } // axios自动处理参数拼接
})
.then(res => {
  const data = res.data;
  // 直接访问所有字段
})
.catch(err => alert(err.response?.data?.message || '请求失败'));

3. 如何在弹窗或结果表单中展示？ #

弹窗展示 #

最简单的方式是把数据格式化成易读的文本弹出：

.then(data => {
  const resultText = `
  日期: ${data.date}
  NO2浓度: ${data.no2}
  PM10浓度: ${data.pm10}
  PM2.5浓度: ${data.pm2_5}
  `;
  alert(resultText);
})

或者用JSON格式化输出：

alert(JSON.stringify(data, null, 2));

结果表单展示 #

先在React组件里定义状态存储返回的数据：

const [resultData, setResultData] = useState(null);

然后在请求成功后把数据存入状态：

.then(data => {
  setResultData(data);
})

最后在JSX里渲染结果表单，只有当resultData存在时才展示：

{resultData && (
  <div className="result-form">
    <h3>检测结果</h3>
    <div>
      <label>日期:</label>
      <input type="text" value={resultData.date} disabled />
    </div>
    <div>
      <label>NO2:</label>
      <input type="text" value={resultData.no2} disabled />
    </div>
    <div>
      <label>PM10:</label>
      <input type="text" value={resultData.pm10} disabled />
    </div>
    <div>
      <label>PM2.5:</label>
      <input type="text" value={resultData.pm2_5} disabled />
    </div>
  </div>
)}

完整App.js示例 #

import { useState } from 'react';

function App() {
  // 管理输入状态
  const [city, setCity] = useState('');
  const [state, setState] = useState('');
  const [country, setCountry] = useState('');
  // 管理结果数据
  const [resultData, setResultData] = useState(null);
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setResultData(null);

    // 用URLSearchParams构建查询参数
    const params = new URLSearchParams({ city, state, country });
    fetch(`/api/air-quality?${params}`)
      .then(res => {
        if (!res.ok) throw new Error('后端请求失败，请检查输入或稍后重试');
        return res.json();
      })
      .then(data => {
        setResultData(data);
      })
      .catch(err => {
        setError(err.message);
      });
  };

  return (
    <div className="app">
      <h2>空气质量查询</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>城市:</label>
          <input
            type="text"
            value={city}
            onChange={(e) => setCity(e.target.value)}
            required
          />
        </div>
        <div>
          <label>州/省份:</label>
          <input
            type="text"
            value={state}
            onChange={(e) => setState(e.target.value)}
            required
          />
        </div>
        <div>
          <label>国家:</label>
          <input
            type="text"
            value={country}
            onChange={(e) => setCountry(e.target.value)}
            required
          />
        </div>
        <button type="submit">查询</button>
      </form>

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

      {/* 结果表单 */}
      {resultData && (
        <div className="result-form">
          <h3>查询结果</h3>
          <div>
            <span>日期:</span>
            <span>{resultData.date}</span>
          </div>
          <div>
            <span>NO2浓度:</span>
            <span>{resultData.no2}</span>
          </div>
          <div>
            <span>PM10浓度:</span>
            <span>{resultData.pm10}</span>
          </div>
          <div>
            <span>PM2.5浓度:</span>
            <span>{resultData.pm2_5}</span>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

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