React中Fetch请求JSON时出现未捕获语法错误，如何解决？

我正在创建一个基础React应用，在格式化带请求头的JSON Fetch请求时遇到问题。以下是我的组件代码，我是新手，觉得问题不难但还没找到原因。

import React, {useEffect} from 'react'; 

function Joke(){
    function loadJoke (){
     fetch("https://icanhazdadjoke.com/", {
        headers: {
            Accept: "application/json", 
            Accept: "text/plain", 
        }, 
    })
    .then((response ) => response.json())
    .then ((data) => console.log(data))
}
useEffect(() => {loadJoke()})
return <h1>some funny joke  goes here</h1>
}    

export default Joke 

我遇到的错误提示为：

Uncaught (in promise) SyntaxError: Unexpected token ... is not valid JSON

在DevTools的网络面板中能看到返回了JSON数据，但不清楚为何会抛出该错误。我尝试修改Promise语法、调整.then(response)方法，都没有效果。

问题原因与修复方案 #

问题出在请求头的Accept字段重复定义——对象中重复的键会被后面的覆盖，所以实际发送的请求头是Accept: "text/plain"，服务器返回的是纯文本格式，而你用response.json()去解析纯文本，自然会触发JSON语法错误。

同时还有一个小问题：你的useEffect没有设置依赖数组，会导致组件每次渲染都重复调用loadJoke，造成不必要的请求。

修改后的代码如下：

import React, {useEffect} from 'react'; 

function Joke(){
    function loadJoke (){
     fetch("https://icanhazdadjoke.com/", {
        headers: {
            Accept: "application/json", 
            // 移除重复的Accept字段
        }, 
    })
    .then((response ) => response.json())
    .then ((data) => console.log(data))
}
// 添加空依赖数组，确保只在组件挂载时执行一次
useEffect(() => {loadJoke()}, [])
return <h1>some funny joke goes here</h1>
}    

export default Joke 

内容的提问来源于stack exchange，提问作者joe44