Question

在遵循使用Fetch with ReactJS的教程之后，我能够从API / json访问某一部分数据，但在尝试访问其他部分时，我收到错误。这是JSON文件，它使用以下API：https://api.myjson.com/file1

代码

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

class BuildingSimulation extends Component {

    state = { data: [] }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/zb5kf', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
        }


        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }


    render() {
        console.log(this.state.data);
        return (

                     <div className="clientContainer">
                            {
                                this.state.data.map( item =>( 
                                <div>
                                    <span> {item.clientName} </span>

                                </div>
                                ))
                            }
                        </div> 
        );
      }
}

export default BuildingSimulation;

...所以我能够从Segments部分获取信息以显示在页面中，但是如何在json文件的标题中获取ID以及总计部分中的数据以显示在我的页面也是？

Answer 1

您只存储API响应中的state个数据。要访问其他数据，您需要将整个响应存储在.then(data => this.setState({ data: data.segments }))中。所以改变

.then(data => this.setState({ data: data }))

到

this.state.data

现在您可以访问所有响应数据。

更新：执行此操作后，segments表示json数据。因此，要访问this.state.data.segments，请使用totals。要访问this.state.data.totals，请使用{{1}}，依此类推。

Answer 2

您也可以像这样破坏对象：

state = {
    id = '',
    segments: [],
    totals: []
}

在取得后，请执行以下操作：

.then(results => results.json()) 
.then(({
    id = '',
    segments = [],
    totals = []
}) => this.setState({
    id,
    segments,
    totals
}));

最后，在你的渲染上使用像这样的状态数据：

render() {
    const {
        id,
        segments,
        totals
    } = this.state;

    return (
        <p>ID: {id}</p>
        <ul>
            {
                segments.map((segment) => <EachSegmentComponent segment={segment} />)
            }
        </ul>
        <ul>
            {
                totals.map((total) => <EachTotalComponent total={total} />)
            }
        </ul>
    )
}

希望这有帮助。

ReactJS错误未处理拒绝 - 如何访问多个部分的json文件？

2 个答案: