React + Spring @GetMapping 和@RequestParam 简单应用

Question

I am trying to make a simple web app, that will have 3 forms for data input, Submit button and Results form.

Requirements: When I enter a data in forms and push Submit button, these parameters should go to a controller and after that React should also parse data from json response that comes from the controller and show parsed data in the Results form.

I have the Spring Controller that takes 3 parameters and return json file as a response.

But I am new with React. I've tried to use different approaches, but stuck with what way exactly I need to do it in this case. So need a help to create a simple React part.

Controller part:

@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();
    }

Response example:

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

UPDATE Here is my App.js part:

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

But I am not sure about my approach in general and particularly about parts where I left comments in App.js.

To be more precise with questions:

1. Should this approach work for my case or I need to implement some different logic?
2. If yes, how I can get all fields from response? I mean not only the first one (date) but no2, pm10, pm2_5 also. For now this logic can return only a first value from json.
3. How I can set these fields to show them in pop-up window (alert) or if question 2 will be solved, this thing also will be good in current form?

Answer 1

The only problem I think you need to solve is to set the data not data.date use this:

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

then access your data fields using

responseData.date

you can replace date with any other field.

do the same for alerts.

your code is working fine, furthermore, you can learn to use functional component instead of class, its much easier.