React + Spring @GetMapping 和@RequestParam 簡單應用

Question

我正在嘗試制作一個簡單的 web 應用程序，它將有 3 個 forms 用於數據輸入、提交按鈕和結果表單。

要求：當我在 forms 中輸入數據並按下提交按鈕時，這些參數應該是 go 到 controller，之后 React 還應該解析來自 controller 的 json 響應的數據，並在結果表單中顯示解析的數據。

我有 Spring Controller 接受 3 個參數並返回 json 文件作為響應。

但我是 React 的新手。 我嘗試過使用不同的方法，但堅持在這種情況下我需要用什么方式來做。 所以需要幫助來創建一個簡單的 React 部分。

Controller部分：

@GetMapping("/current/city")
    public JSONObject getCurrentPollutionDataByCityStateCountry(
            @RequestParam(value = "city") String city,
            @RequestParam(value = "state") String state,
            @RequestParam(value = "country") String country
    ) {
        try {
            return pollutionService.getCurrentPollutionDataByCityStateCountry(city, state, country);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new JSONObject();
    }

響應示例：

{"date":"Tue Dec 06 22:13:32 CET 2022","no2":"48.67","pm10":"9.51","pm2_5":"5.85"}

更新這是我的 App.js 部分：

import React, {Component} from 'react'
import './App.css'

import axios from 'axios'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            city: 'New York',
            province: 'New York',
            country: 'US',
            responseData: ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    handleSubmit(event) {
        axios.get('http://localhost:8080/pollution/current/city?' +
            'city=' + this.state.city +
            '&state='+ this.state.province +
            '&country=' + this.state.country)
            //not sure about setState here and what is going after that
            .then(response => this.setState({responseData: response.data.date})) 
        
        //need to take all fields from response
        //just alert message with returned response for now
        alert('Response: ' + this.state.responseData);
        
        event.preventDefault();
    }
    
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    City:
                    <input name="city" type="text" value={this.state.city} onChange={this.handleInputChange}/>
                </label>
                <br/>
                <label>
                    State:
                    <input name="state" type="text" value={this.state.province} onChange={this.handleInputChange}/>
                </label>
                <br/>
                <label>
                    Country:
                    <input name="country" type="text" value={this.state.country} onChange={this.handleInputChange} />
                </label>
                <br/>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

export default App

但我不確定我的總體方法，尤其是我在 App.js 中留下評論的部分。

更准確地說，問題是：

1. 這種方法應該適用於我的案例還是我需要實現一些不同的邏輯？
2. 如果是，我如何從響應中獲取所有字段？ 我的意思不僅是第一個（日期），還有 no2、pm10、pm2_5。 目前此邏輯只能返回 json 中的第一個值。
3. 我如何設置這些字段以在彈出窗口 window（警報）中顯示它們，或者如果問題 2 將得到解決，這個東西在當前形式下也會很好嗎？

Answer 1

我認為你需要解決的唯一問題是設置數據而不是 data.date 使用這個：

this.setState({responseData: response.data})) 

然后使用訪問您的數據字段

responseData.date

您可以用任何其他字段替換日期。

對警報做同樣的事情。

你的代碼工作正常，此外，你可以學習使用功能組件而不是 class，它更容易。