Публикация и получение последнего объекта json с компонентом React - PullRequest
Новая
       12

Публикация и получение последнего объекта json с компонентом React

0 голосов
/ 28 апреля 2019

Я создал компонент React, в котором я извлекаю объект из файла json, сохраняю его в состоянии и показываю на моей странице.Все работает, но теперь я хочу перейти к следующему шагу и не знаю, как это сделать.

Мой план: когда пользователь отправляет форму, вход добавляется в файл json (json-сервер),не знаю, как я собираюсь это сделать, но вижу, что есть некоторая документация, как это сделать с fetch.Но тогда сложная часть, как я могу отобразить последнюю запись из файла json, используя fetch?Я знаю, что могу получить доступ к последнему элементу, используя -1, но не знаю, как поступить в моем текущем коде.

Вот фрагмент из компонента: 

import React, { Component } from 'react';

class Result extends Component {

    state = {
        loading: true,
        consumer: null
    };

    async componentDidMount() {
        const url = "http://localhost:3004/results";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ consumer: data.consumer[0], loading: false });
        console.log(data);
    }

    render() {
        return (
            <div className="result">
                {this.state.loading || !this.state.consumer ? (
                    <div>retrieving coupon...</div>
                ) : (
                        <React.Fragment>
                            <div className="result-left">
                                <p>Gift card</p>
                                <p>
                                    <span id="coupon-displayNumber">
                                        {this.state.consumer.giftcardnumber}
                                    </span>
                                    <span id="coupon-displayCode">
                                        <span> {this.state.consumer.code}</span>
                                    </span>
                                </p>
                            </div>
                            <div className="result-right">
                                <p>-${this.state.consumer.price}</p>
                            </div>
                        </React.Fragment>
                    )
                }

            </div>
        )
    }
}

export default Result;
...