×REACT：我该如何解决：未处理拒绝（TypeError）：无法在'Window'上执行'fetch'：无效模式

Question

好的你们，我只是想在这个例子中创建一个指定为玩具的“用户”。这段代码昨天运行良好，允许我用一个用户名和电子邮件创建“用户”。 这是我的代码：

    async postData(path, data) {
    const url = `http://localhost:3001${path}`
    const response = await fetch(url, {
        method: 'POST',
        mode: 'CORS',
        body: JSON.stringify(data),
        headers: {
            'Content-Type' : 'application/json'
        }
    })
console.log(response)
return response
}

clickHandler = async () => {
    await this.postData("/toys", this.state)
}

componentDidUpdate() {
    console.log(this.state)
}

我的GET正在运作＆amp;在我的控制台中显示我以前创建的用户，但映射信息会返回以下错误：

请帮忙!!多谢你们！

Answer 1

错误消息表明您需要使用正确的请求模式（mode: 'cors' - 小写）。

async postData(path, data) {
    const url = `http://localhost:3001${path}`
    const response = await fetch(url, {
        method: 'POST', // uppercase
        mode: 'cors', // lowercase
        body: JSON.stringify(data),
        headers: {
            'Content-Type' : 'application/json'
        }
    })
    console.log(response)
    return response
}

此外，通常建议添加错误处理

clickHandler = async () => {
    try {
      const resp = await this.postData("/toys", this.state)

      if (!resp.ok) { ...}

    } catch (e) {
      // do smth if error
      console.error(`Unable to create a toy due to ${e}`)
    }
}