如何在 CRUD 应用程序中正确更新

Question

我正在开发一个 CRUD 应用程序，使用 webpack 作为模块捆绑器，json:server 作为模拟后端。所有其他操作都运行良好，但更新将字段填充为未定义。所以如果一个post如下...

Post 1

content for post 1

如果我尝试对其进行编辑，它将按字面意思显示为...

Undefined

Undefined

我不确定我哪里出错了，但我认为这是一个范围问题。我要么没有正确引用某些东西，要么我需要重新考虑一组花括号。至少我是这么想的。

在我的 http.js 文件中，put 请求与所有其他请求都在 HTTP class 中（post，put , 删除, 得到)

...
    // Make an HTTP PUT Request
    async put(url, data) {
        const response = await fetch(url, {
            method: 'PUT',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(data)
        });

        const resData = await response.json();
        return resData;
    }

...

以上代码导出到 app.js 文件，该文件处理提交 post 函数。

...
function submitPost() {
    const title = document.querySelector('#title').value;
    const body = document.querySelector('#body').value;
    const id = document.querySelector('#id').value;

    const data = {
        title,
        body
    }

    // Validate input
    if (title === '' || body === '') {
        ui.showAlert('Please fill in all fields', 'alert alert-danger');
    } else {
        // Check for ID
        if (id === '') {
            // Create Post
            http.post('http://localhost:3000/posts', data)
                .then(data => {
                    ui.showAlert('Post added', 'alert alert-success');
                    ui.clearFields();
                    getPosts();
                })
                .catch(err => console.log(err));
        } else {
            // Update Post
            http.put(`http://localhost:3000/posts/${ id }`, data)
                .then(data => {
                    ui.showAlert('Post updated', 'alert alert-success');
                    ui.changeFormState('add');
                    getPosts();
                })
                .catch(err => console.log(err));
        }

    }
}
...

从 ui 模块导入的 ui 函数在我看来都可以正常工作。 getPosts 也在工作，但如果有必要查看该文件或 HTML 文件，我将很乐意提供。任何帮助将不胜感激。

编辑：

更新后的 json 文件显示如下。 id为2的post曾经有类似post后面的内容

...
"posts": [
    {
      "id": 2
    },
    {
      "id": 3,
      "title": "Post Three",
      "body": "This is post three."
    },
...

Answer 1

多亏了@DDupont，我才能够找到我哪里出错了。 HTTP PUT 请求 headers 中非常简单的粗心拼写错误。

"Content-type": "application.json"

我在那里有一段时间。这应该是...

"Content-type": "application/json"

如何在 CRUD 应用程序中正确更新

How to properly update in a CRUD application

javascript

json

crud

webpack