您将如何提取动态状态以构造查询字符串？

这是我未解决的代码。希望您能为实现以下目标提供一些指导：

1. that when the submit button is clicked, I want the dynamic state to be transformed to a query string and use this query string to do fetch.

2. The fetch should get results from the api and show it in my <SearchResult/> component, which is routed as <Route path="/form/result" exact component={SearchResult}/> in the main App.js. When the SearchResult component is loaded with the result, the url should show ../form/result?query1=val1&query2=val2.

。

import React from 'react';
import {TextIn, NumberIn, Dropdown, Datalist, Radio, Checkbox, SubmitButton} from './FormElements';


class HomeForm extends React.Component{
        constructor(props){
            super(props);
            this.state={

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

handleSubmit = async (event) => {
    event.preventDefault(); //this is to prevent default action of submit button which is to redirect to different page.
    let body = this.state;
    const response = await fetch('http://localhost:3000/api/home', {
        method: 'POST',
        headers:{
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(body)
    });
    const resbody = await response.json();
    console.log(resbody);
}

handleInputChange(event){
    event.preventDefault();
    this.setState({
        [event.target.name]: event.target.value, //this is to access the name of the event target
    });
}

render(){

    return(
        <form className="form-container" onSubmit={this.handleSubmit}>
            <NumberIn label="enter area in m2: " name="area" onChange={this.handleInputChange}/>
            <Dropdown label="enter type: " name="type" options={["one", "two", "three(revised)"]} onChange={this.handleInputChange}/>
            <SubmitButton label="Search"/>
        </form>
    );
}
}

export default HomeForm;