弹出模态不更新

Question

我目前正在按照教程通过模态编辑我的博客，但是，每当我在模态中按下编辑按钮时，我的控制台中都会出现以下错误 Failed to execute 'fetch' on 'Window': Invalid name。以下是错误所在的代码：

import React, { Fragment, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";


const EditTodo = ( { blog }) => {

  const [title, setTitle] = useState(blog.title)
  const [content, setContent] = useState(blog.content)

  const editText = async (id) => {

    const body = {title, content}
    console.log(JSON.stringify(body))
    try {
      const res = await fetch(`http://localhost:5000/blog/${id}`, {
        method: "PUT",
        headers: {'Content Type': 'application/json'},
        body: JSON.stringify(body)
      })

      console.log(res)

    } catch (err) {
      console.error(err.message)
    }
  }

  return (
    <Fragment>
  <button type="button" className="btn btn-warning" data-toggle="modal" data-target={`#id${blog.post_id}`}>
    Edit
  </button>
  
  
  <div className="modal" id={`id${blog.post_id}`}>
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <h4 className="modal-title">Edit Blog</h4>
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>
  
        
        <div className="modal-body">
          <input type='text' className='form-control' value={title} onChange={e => setTitle(e.target.value)}/>
          <input type='text' className='form-control' value={content} onChange={e => setContent(e.target.value)}/>
        </div>
  
        
        <div className="modal-footer">
          <button type="button" className="btn btn-warning" data-dismiss="modal" onClick={() => editText(blog.post_id)}>Edit</button>
          <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
  
      </div>
    </div>
  </div>
  </Fragment>
  )
}

export default EditTodo;

我相信错误是在 fetch 调用期间发生的，但我的 fetch 调用看起来没有错误，除非我遗漏了什么：

const editText = async (id) => {

    const body = {title, content}
    console.log(JSON.stringify(body))
    try {
      const res = await fetch(`http://localhost:5000/blog/${id}`, {
        method: "PUT",
        headers: {'Content Type': 'application/json'},
        body: JSON.stringify(body)
      })

      console.log(res)

    } catch (err) {
      console.error(err.message)
    }
  }

Answer 1

我改用 axios.put，它消除了错误，我的模式现在正在更新。

Answer 2

我设法通过在浏览器控制台中键入此错误来复制错误

fetch('http://localhost:3000', {method: 'PUT', headers: {'Content Type': 'application/json'}, body: "{}"})

而且当我输入这个时没有显示错误：

fetch('http://localhost:3000', {method: 'PUT', headers: {'Content-Type': 'application/json'}, body: "{}"})

问题是 header 的名称。它应该是 Content-Type 而不是 Content Type.

弹出模态不更新

Pop up Modal not updating

html

javascript

css

bootstrap-modal

reactjs