Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern in ReactJS Website

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()

如果服务器 returns 文本是合适的。

在这种情况下，Safari 曾给我 OP 的错误，但 Chrome 更具体：“Unexpected token W in json at position 0”——res.json() expects字符串的第一个字符是 { 或 [ 因为这是 JSON 开始的方式。

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

Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern in ReactJS Website

Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern in ReactJS Website

javascript

reactjs

web