React - 使用 axios 将参数发送到后端

Question

我正在使用各种 get 方法开发一个项目。其中一种方法是以 maximum 的价格获取优惠券，这需要从服务器发送 param。

从后端获取方法：

 @GetMapping("coupon/{price}")
    @ResponseStatus(HttpStatus.ACCEPTED)
    public List<Coupon> getCustomerCouponsByMaxPrice(@RequestParam double price) {
        return customerService.getCustomerCouponsByMaxPrice(price);
    }

这是一种非常简单的方法，可以通过输入的最高价格获取客户的所有优惠券。这种方法在后端工作得很好。

我的问题出在我的 React 组件上。

反应端GetComponent：

interface RouteParam {
    price: string;
}

interface CouponByPrice extends RouteComponentProps<RouteParam> { }

interface CouponDetailState {
    coupons: CouponModel[];
}

class GetCouponByPrice extends Component<CouponByPrice, CouponDetailState> {
    public constructor(props: CouponByPrice) {
        super(props);
        this.state = {
            coupons: null,
        };
    }

    public async componentDidMount() {
        try {
            const price = +this.props.match.params.price;
            
          
           // const coupon = store.getState().couponState.coupons.find((p) => p.price === price);
             const response = await axios.get<CouponModel[]>(globals.urls.customerCouponsByPrice + 1000);
            
            this.setState({ coupons: response.data });
        } catch (err) {
            notify.error(err);
        }
    }

    public render(): JSX.Element {
        return (

            
            <div className="CatDetails Box">
                {!this.state.coupons && <EmptyView msg="No Coupons for that price" />}
                {this.state.coupons && (
                    <>
                        {" "}
                        <h2>CouponByPrice</h2>

                        <div className="top">
                            <h1>Coupon List</h1>
                        </div>/
                        <div className="card">
                            <Box m={4} pt={4} >
                                <Grid container spacing={6}
                                    direction="row"
                                    justifyContent="space-evenly"
                                    alignItems="center"
                                    style={{ minHeight: '80vh' }}
                                >
                                    {
                                        this.state.coupons.map(c => (
                                            <Grid item xs={6} sm={4} >
                                                <Card2 key={c.id} coupon={c} />
                                            </Grid>
                                        ))
                                    }
                                </Grid>
                            </Box>
                        </div>

                        <br />
                        <NavLink to="/home">Back</NavLink>
                    </>
                )}
            </div>
        );
    }
}

export default GetCouponByPrice;

注：我给了一个嵌入式价格只是为了看看它是否有效。

URL 用于 axios:

"http://localhost:8080/api/customer/coupon/{param}"

我不确定这个的正确语法。但是，当我检查代码时，我不确定我到底遗漏了什么。

错误： 我得到的是 400.

对此还是陌生的。

谢谢。

Answer 1

您需要在您的请求中发送一个配置对象，它带有一个参数对象。

尝试以下方法

axios({
  method: 'get',
  url: 'http://localhost:8080/api/customer/coupon/',
  params:{price:'100'}
})

参见 - https://axios-http.com/docs/req_config

React - 使用 axios 将参数发送到后端

React - Send param using axios to back-end

parameters

routes

backend

reactjs