reactjs - GET 请求在 url 中未定义

Question

我正在尝试从 API 获取调用中获取数据，然后使用补丁调用编辑该数据，但似乎我的获取请求在这里不起作用。我是反应新手，任何帮助都会得到帮助。我对此很陌生。但是我在网上找不到太多帮助。这是我的 editInvice.js

import {
    Button, Card,
    CardBody,
    CardHeader, Col, Form,
    FormGroup, Input,
    Label, Row,
} from 'reactstrap';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
import {editInvoice, getInvoiceDetails} from "../../../helpers/api";


export default () => {

    //
    // var len = window.location.href.length;
    // var id = window.location.href[len-1];


    //TODO THIS IS NOT THE REACT METHOD TO FETCH ID FROM THE URLTT

    const [form, setForm] = useState({
        'id': '',
        'invoice_number': '',
        'invoice_date': '',
        'invoice_due_date': '',
        'invoice_place_of_supply': '',
        'invoice_destination': '',
        'invoice_destination_address': '',
        'invoice_destination_pincode': '',
        'invoice_gst': '',

        'invoice_quiz_id':'',


        'invoice_salesperson': '',
        'invoice_lr_number': '',
        'invoice_vehicle_placement_date': '',
        'invoice_vehicle_number': '',
        'invoice_service_month': '',
        'invoice_item_details': '',

        'invoice_rate': '',
        'invoice_tax': '',
        'invoice_amount': '',
        'invoice_quiz': '',
        'invoice_owner': '',
        'invoice_quantity': '',


        'lr_number': '',
        'billing_party_name': '',
        'origin_address': '',
        'origin_pincode': '',
        'vehicle_placement_date': '',
        'vehicle_number': '',
        'item_details': '',
        'item_quantity': '',
        'total_amount': '',
        'tax': '',

    });


    useEffect(() => {
        const getNetwork = async () => {
            const invoice_details = await getInvoiceDetails(form.invoice_quiz);
            setForm(invoice_details);
        };
        getNetwork();
    }, [setForm]);


    const handleInputChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        setForm({
            ...form,
            [name]: value
        });
    };

    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            alert(JSON.stringify(form));
            await editInvoice(form, form.invoice_quiz_id);
            alert('done')
        } catch (e) {
            alert(JSON.stringify(e))
        }
    };

    return (
        <Card>
            <CardHeader>
                <strong>Edit Invoice</strong>
            </CardHeader>
            <CardBody>
                <Form method={'post'} onSubmit={handleSubmit}>
                    <Row form>
                        <Col md={4}>
                            <FormGroup>
                                <Label for="origin">Invoice number</Label>
                                <Input type="text" name="invoice_number" id="invoice_number" valid={form.invoice_number}
                                       onChange={handleInputChange}/>

                            </FormGroup>
                        </Col>

                        <Col md={4}>
                            <FormGroup>
                                <Label for="origin">Invoice ID</Label>
                                <Input type="text" name="id" id="id" value={form.id}
                                       onChange={handleInputChange}/>
                            </FormGroup>

                        </Col>
                        <Col md={4}>
                            <FormGroup>
                                <Label for="scheduled_date">Invoice Date</Label>
                                <Input type="datetime-local" name="invoice_date" id="invoice_date"
                                       value={form.invoice_date}
                                       onChange={handleInputChange}/>
                            </FormGroup>
                        </Col>
                    </Row>
                    <Button color={"primary"} size={"lg"}>Create</Button> &nbsp;&nbsp;&nbsp;
                    <Button color={"link"} size={"lg"}>Cancel</Button>
                </Form>
            </CardBody>
        </Card>

这是我的获取 API 调用：

const GET_INVOICE = '/suppliers/invoiceapi/';
export const getInvoiceDetails = (id) => loadSecureUrl(`${GET_INVOICE}${id}`);

这是我的补丁 API 调用

const EDIT_INVOICE = 'suppliers/invoiceapi';
export const editInvoice = (data,id) => loadSecureUrl(`${EDIT_INVOICE}${id}`, {
    data: data,
    method: 'patch'
});```

标签： reactjsdjango-rest-frameworkreact-reduxfrontend

Answer 1

我认为您的GET功能缺少方法。我希望这能回答你的问题。

const GET_INVOICE = '/suppliers/invoiceapi/';
    export const getInvoiceDetails = (id) => loadSecureUrl(`${GET_INVOICE}${id}`, {
    method: 'get'
});