未处理的 Promise 拒绝：SyntaxError：字符串与 ReactJS 网站中的预期模式不匹配

Question

我正在使用 ReactJS 构建一个网站，该网站使用我计算机本地存在的 JSON 来获取要填写的信息。这是index.js 文件：-

import React from 'react';
import data from 'notes.json';

class BlogList extends React.Component {
    constructor(props){
        super(props);

        this.state={
            items:[],
            loaded: false
    };

}

/* useEffect()=>{
return function(){

}
},[deep])
*/      //Similar to ComponentDidUnMount();

componentDidMount(){
    fetch(data)
    .then(response => response.json())
    .then(json => {
        this.setState({
            items: json,
            loaded: true,
        })
    })
    
 }

    render() {
        const {items, loaded} = this.state;

       if(!loaded){
            return <h3>Loading........</h3>
        }
        return (
            <div className="content-container" >
            {   
                items.map((item)=>(
                    <div key={item.id}>

                        <p>
                            {item.postId}
                        </p>
                        <p>
                            {item.id}
                        </p>
                        <p>
                            {item.name}
                        </p>
                        <p>
                            {item.email}
                        </p>
                        <p>
                            {item.body}
                        </p>
                        <hr/>
                    </div>
                ))

            }
        </div>
        );
    }
}

export default BlogList;

JSON 文件在这里：-

[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },
  {
    "postId": 1,
    "id": 4,
    "name": "alias odio sit",
    "email": "Lew@alysha.tv",
    "body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
  }
]

它不断地在控制台中给我这个错误： - 未处理的承诺拒绝：语法错误：字符串与预期模式不匹配。

Answer 1

如果服务器的响应是文本，但您尝试使用 res.json() 将其解析为 JSON，则可能会收到此错误。

fetch(serverUrl, {method: 'GET'})
.then((res) => res.json())
res.text() 

如果服务器返回文本，则适用。

在这种情况下，Safari 曾经给我OP的错误，但 Chrome 更具体：“json 中位置 0 处出现意外的标记 W”—— res.json() 期望字符串的第一个字符为 { 或 [ 因为这就是方式JSON 开始。

或者，正如 Safari 所说，“字符串与预期模式不匹配。”