javascript - 在 React 中使用 Axios PUT 时出现未捕获错误“未捕获（承诺中）错误状态 400”

Question

我在使用 Axios.Put 更新我的 API 中的记录时出错，我似乎无法找到解决这个问题的方法，而且我也无法完全理解它想要告诉我什么。

这是我使用 PUT 更新记录的更新组件。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function Update() {
const [ProductDescription, setProductDescription] = useState('');
const [ProductCount, setProductCount] = useState('');

const [id, setID] = useState(null);

    useEffect(() => {
    setID(localStorage.getItem('productID'))
    setProductDescription(localStorage.getItem('productDescription'));
    setProductCount(localStorage.getItem('productCount'));
}, []);


const updateAPIData = () => {
    axios.put(`https://localhost:44380/api/products/`+id, {
       ProductDescription,
       ProductCount
    }).then(response => {
        if(response.data !=null) {
            alert("Update Successfully")
        }
    })
}

    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>Product Description </label>
                    <input placeholder='Product Description' value={ProductDescription} onChange={(e) => setProductDescription(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Product Count</label>
                    <input placeholder='Product Count' value={ProductCount} onChange={(e) => setProductCount(e.target.value)}/>
                </Form.Field>
                <Button type='submit' onClick={updateAPIData}>Update</Button>
            </Form>
        </div>
    )
};

我也使用过这段代码，但仍然有同样的错误

axios.put(`https://localhost:44380/api/products/${id}'

这就是我使用按钮获取其他组件数据的方式

    const [ProductDescription, setProductDescription] = useState('');
    const [ProductCount, setProductCount] = useState('');

    const [id, setID] = useState(null);

        useEffect(() => {
        setID(localStorage.getItem('productID'))
        setProductDescription(localStorage.getItem('productDescription'));
        setProductCount(localStorage.getItem('productCount'));
}, []);


    const setData = (data) => {
        let { productID, productDescription, productCount } = data;
        localStorage.setItem('productID', productID);
        localStorage.setItem('productDescription', productDescription);
        localStorage.setItem('productCount', productCount);

<IconButton><Edit onClick={() => setData(data)}/></IconButton>

我确实undefined使用 localStorage 获取数据，为什么会这样？

标签： javascriptreactjsaxios