数据更改后界面不刷新

Question

api_calls.js

// READ
export const getData = async (getPath) => {
        var response = await fetch(getPath, 
            {  method: 'GET' }
            );
        let result = await response.json();
        return result;
    }

// UPDATE
export const updateData = async (patchPath, payload) => {
    fetch(patchPath, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
}
// CREATE
export const addData = async (addPath, payload) => {
     fetch(addPath, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'accept': 'application/json'},
        body: JSON.stringify(payload)
       });
}
// DELETE
export const deleteData = async (deletePath) => {
    fetch(deletePath, {method: 'DELETE' });
}

+页面.svelte

<script>
    // @ts-nocheck
    import { page } from '$app/stores';
    import { onMount } from "svelte";
    import { fly } from 'svelte/transition';
    import { configs } from '../../config.js';
    import { addData, deleteData, getData, updateData } from '../../stores/api_calls.js'
    import {Button, ButtonGroup, Offcanvas, ModalBody, ModalFooter, ModalHeader, Input, Label, Table} from 'sveltestrap';

    export let manufacturers = []
    export let count = 0;

    const getPath = configs.baseURL+$page.url.pathname;

    var addManufacturerForm = { id: null, name: '' };
    var editForm = {_id: '', name: '' };

    onMount( async () => {
        getData(getPath)
        .then((data) => manufacturers = data)
        .catch((reason) => console.log("Message: " + reason.message ));
    });

    function refreshData(msg) {
        getData(getPath)
        .then(function (data) { manufacturers = data; count++;} )
        .then(console.log(msg))
        .catch((reason) => console.log("Message: " + reason.message ));
    }

    function editManufacturer(manufacturer) {
        updatetoggle();
        editForm = manufacturer; 
    };
    
    function updateManufacturer() {
        const payload = { 
            id: editForm.id,
            name: editForm.name
        };
        const patchPath = getPath+"/"+editForm.id;
        updateData(patchPath, payload);
        refreshData('update');
        updatetoggle();
    }

    function addManufacturer() {
        addManufacturerForm.id = null;
        addData(getPath, addManufacturerForm);
        refreshData('add');
        addtoggle();
     }

     function removeManufacturer(manufacturerID) {
        deleteData(getPath+"/"+manufacturerID);
        refreshData('remove');
     }

    function initForm() {
        addManufacturerForm.id = '';
        addManufacturerForm.name = '';
        editForm._id = '';
        editForm.name = '';
    };

    let addopen = false;

    function addtoggle() {
        initForm();
        addopen = !addopen;
    };

    let updateopen = false;

    function updatetoggle() {
        initForm();
        updateopen = !updateopen;
    };

</script>

<svelte:head>
    <title>Planes</title>
    <meta name="description" content="manufacturers" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

</svelte:head>
<div>
    <div class="row">
        <div class="col-sm-12">
            <h1>Manufacturers</h1>
            <hr><br>
            <Button color="success" outline on:click = {() => addtoggle()}> {addopen} - Add Manufacturer</Button>
            <Button color="success" outline on:click = {() => refreshData('refresh')} > {count} - Refresh Manufacturer</Button>
            <br><br>
            <Table hover>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {#each manufacturers as manufacturer}
                <tr transition:fly="{{ y: 48, duration: 200 }}">
                    <td>{ manufacturer.name }</td>
                    <td>{ manufacturer.id }</td>
                    <td><span style="float: right;">
                        <Button color="warning" on:click={() => editManufacturer(manufacturer)}>Update</Button>
                        <Button color="danger" on:click={() =>  removeManufacturer(manufacturer.id)}>Delete</Button>
                        </span>
                    </td>
                </tr>
                {/each}
        </tbody>
      </Table>
    </div>
  </div>
    <Offcanvas isOpen={addopen} {addtoggle}>
        <ModalHeader {addtoggle}>Add a new manufacturer</ModalHeader>
        <ModalBody>
          <Label for="newTitle">Name:</Label>
          <Input type="text" bind:value={addManufacturerForm.name} placeholder="manufacturer name"/>
            <p></p>
        </ModalBody>
        <ModalFooter>
            <Button color="primary" on:click={() => addManufacturer()}>
                Add manufacturer
            </Button>
            <Button color="secondary" on:click={() => addtoggle()}>
                Cancel
            </Button>
        </ModalFooter>
    </Offcanvas>
    <Offcanvas isOpen={updateopen} {updatetoggle}>
        <ModalHeader {updatetoggle}>Update Manufacturer</ModalHeader>
        <ModalBody>
            <Label for="newTitle">Name:</Label>
            <Input type="text" bind:value={editForm.name} placeholder="manufacturer name"/>
            <p></p>
        </ModalBody>
        <ModalFooter>
            <Button color="primary" on:click={() => updateManufacturer()}>
                Update
            </Button>
            <Button color="secondary" on:click={() => updatetoggle()}>
                Cancel
            </Button>
        </ModalFooter>
    </Offcanvas>
</div>

因此 api_calls.js 文件旨在成为应用程序的通用 api 处理程序。当我将其设置为一页时，它工作正常，但现在删除按预期工作，有时更新工作。添加永远不会更新界面。我添加了手动刷新按钮，数据库中的所有数据再次被正确更改。我只是不知道为什么事件侦听器没有触发。

Answer 1

缺少 api_calls.js 函数上的等待和 page.svelte 函数上的 .then

// CREATE
export async function addData(addPath, payload) {
     let response = await fetch(addPath, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'accept': 'application/json'},
        body: JSON.stringify(payload)
       });
       return response;
}

    function  addManufacturer() {
        addManufacturerForm.id = null;
        addData(getPath, addManufacturerForm)
        .then(()=>{ refreshData('add') });
        addtoggle();
     }