如何在 REACT JS 中使用 axios 连接 URL 和字符串，并在单击按钮时从 API 获取数据

如何解决如何在 REACT JS 中使用 axios 连接 URL 和字符串，并在单击按钮时从 API 获取数据

这是我的代码：

import React,{ Component } from 'react'
import { Button,Form,Card,Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Ceklaporan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            client: "10018318318anhsajda0skflisjf",uniq_id: '',data: [],}
    }


    notiket() {
        axios({
            method: 'GET',url: 'http://11100011000/bla/?m=api&f=jadjsjf&client_id=djhajdhajdhajc&uniq_id=${this.state.uniq_id}'
        })
            .then((v) => {
                console.log(v.data)
            })
            .catch((e) => console.log(e.response))
    }

    render() {
        return (
            <div className='container'>
                <div className="row justify-content-center">
                    <Form style={{ marginTop: 50,width: '40%' }}>
                        <Form.Group id="uniqid">
                            <Form.Control type="text"
                                placeholder=" Nomor Tiket Laporan"
                                name="uniqid"
                                onChange={(v) => this.setState({
                                    uniq_id: v.target.value,})}
                                value={this.state.uniq_id}
                                required />
                        </Form.Group>
                        <Button
                            variant="primary"
                            size="sm"
                            onClick={() => this.notiket()}
                            style={{
                                marginTop: 10,marginBottom: 30,width: '30%'
                            }}
                        >Simpan
                        </Button>
                    </Form>
                </div>
                <div className="container">
                    <Table striped bordered hover variant="light" style={{ marginTop: 20 }}>
                        <thead>
                            <tr>
                                <th>Nomor Tiket</th>
                                <th>Tanggal</th>
                                <th>Pengirim</th>
                                <th>Judul</th>
                                <th>Detail</th>
                                <th>Topik</th>
                                <th>Lokasi</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                        
                        
                            {this.state.data.map(data => (
                                <tr key={data.uniq_id}>
                                    <td>{data.uniq_id}</td>
                                </tr>
                            ))}
                        </tbody>
                    </Table>
                </div>
                <div className="card" >
                    <Card id="tindaklanjut">
                        <Card.Header as="h5" style={{ backgroundColor: '#0CCDA3',fontSize: 21,fontFamily: 'serif',color: 'white' }}>Detail Tindak Lanjut</Card.Header>
                        <Card.Body>
                            <div>                                                                                      

                                {this.state.data.map(data => (
                                    <tr key={data.uniq_id}>
                                        <td>{data.history}</td>
                                    </tr>
                                ))}
                            </div>
                        </Card.Body>
                    </Card>

                </div>
            </div>
        )
    }
}

export default Ceklaporan;





so when the user enters the complaint number prevIoUsly obtained,when the "SEARCH" button is clicked,the "GET DATA" request from AXIOS to the API will appear in the table provided under the form,while for "FOLLOW-UP DETAIL" will appear on the card below it,the Card is specifically for displaying the "HISTORY" of the report


so my problem is:
1. concatenate URL and UNIQ_ID from the state that is in the function "NOTICET"
2. data cannot be displayed in the table below the form
3. HISTORY cannot be displayed on the card at the bottom of the table


This is the form to input the complaint number:

<!-- begin snippet: js hide: false console: true babel: false -->

解决方法

这是输入投诉编号的表格：

<div className="row justify-content-center">
                    <Form style={{ marginTop: 50,width: '40%' }}>
                        <Form.Group id="uniqid">
                            <Form.Control type="text"
                                placeholder=" Nomor Tiket Laporan"
                                name="uniqid"
                                onChange={(v) => this.setState({
                                    uniq_id: v.target.value,})}
                                value={this.state.uniq_id}
                                required />
                        </Form.Group>
                        <Button
                            variant="primary"
                            size="sm"
                            onClick={() => this.notiket()}
                            style={{
                                marginTop: 10,marginBottom: 30,width: '30%'
                            }}
                        >Simpan
                        </Button>
                    </Form>
                </div>