JSON输入错误的意外结束

Question

我有一个 reactjs 页面，它使用一个 API： ...通过邮递员（GET 请求）进行测试时，会呈现以下结果：

[
    {
        "clientI": "FedEx KinKOs"
    }
]

这是我的代码：

import React, { Component } from 'react';
import {render} from "react-dom";
import './ClientInfo.css';

class ClientInfo extends Component {
    state = {
        data:[],
        url: "https://jsonplaceholder.typicode.com/todos"
      };
   componentDidMount() {
    fetch(this.state.url)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

    render() {
        const { data } = this.state;
        data && console.log(data);
        return (
            <div>

                <div className="container">
                        <div className="clientContainer">
                        {data &&
                            data.map(item =>
                                <div>
                                    <span>{item.userId} </span>
                                    <span>{item.id} </span>
                                    <span>{item.title} </span>
                                </div>
                        )}
                        </div> 
            </div>  
          </div>
        );
      }
}
export default ClientInfo

...上面代码的这一行出现错误： .then(response => response.json())

我可以就我做错的事情寻求帮助吗？

Answer 1

说明

1. 您使用了两次.then()。
2. 无法调用 response.json()，因为您正在从端点获取 JSON 对象。如果内部没有回调函数，则不能调用函数.json()。
3. 使用 setState() 函数设置状态就足够了。

解决方案

componentDidMount() {
  fetch(this.state.url).then(response => {
    this.setState({ response });
  });
}