放置 404（未找到）答案

【问题标题】：PUT 404 (Not Found)放置 404（未找到）
【发布时间】：2021-08-11 12:43:28
【问题描述】：

我正在尝试从表单中编辑我的数据库的内容（存储在本地主机上的 json 服务器上）。我对 React 和 Axios 还很陌生，所以如果我在这里大发雷霆，你可以随意侮辱我，但是，我仍然希望你能帮助我摆脱我遇到的错误。

代码如下：

表格：

                <Form onSubmit={submitPresentationEdit} id="presentationEditFormId">
                    <Form.Row>
                        <Form.Group>
                            <Form.Label>Title</Form.Label>
                            <Form.Control
                                name="title"
                                autoComplete="off"
                                as="textarea"
                                rows={1} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Subtitle</Form.Label>
                            <Form.Control
                                name="subtitle"
                                autoComplete="off"
                                as="textarea"
                                rows={1} />
                        </Form.Group>
                    </Form.Row>
                    <Form.Group>
                        <Form.Label>Description</Form.Label>
                        <Form.Control
                            name="description"
                            autoComplete="off"
                            as="textarea"
                            rows={5} />
                    </Form.Group>
                    <Button
                        variant="success"
                        type="submit"
                        size="sm" >
                        Submit
                    </Button>
                </Form>

提交函数（submitPresentationEdit）：

const submitPresentationEdit = (event) => {
        event.preventDefault();
        putPresentation(event.target.title.value, event.target.subtitle.value, event.target.description.value);
}

使用 axios 的 putPresentation 函数：

    const putPresentation = async (tit, subtit, descr) => {
        const response = await axios
            .put('http://localhost:3005/presentation',
            {
                title: tit,
                subtitle: subtit,
                description: descr
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                  }
            })
            .then(response => {
                console.log(response.data);
            })
            .catch((err) => {
                console.log('Err', err);
            });
    }

这是我的 json 文件：

[
  {
    "title": "PRESENTATION",
    "subtitle": "An Awesome Web delevoper on planet",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum.",
    "image": "../../public/assets/images/dp.jpg"
  }
]

我在控制台上遇到的错误如下：

PUT http://localhost:3005/presentation 404 (Not Found)
Err Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

有没有人知道我可以做些什么来获得我需要的结果？提前谢谢你。

【问题讨论】：

该 URL 上似乎没有“PUT”路由。
你能分享一些api代码吗？你试过用邮递员或其他工具测试api端点吗？

标签： javascript reactjs react-redux axios

【解决方案1】：

我已经解决了这个问题，只需在我的数据库的“演示文稿”部分添加一个“id”字段，所以现在：

我的 json 文件如下所示：

[
  {
    "id": 0,
    "title": "PRESENTATION",
    "subtitle": "An Awesome Web delevoper on planet",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum.",
    "image": "../../public/assets/images/dp.jpg"
  }
]

【讨论】：