使用React组件发布和检索最新的json对象

Question

我建立了一个React组件，从json文件中检索对象，将其保存为状态并显示在页面上。一切正常，但现在我要继续进行下一步，不确定如何执行。

我的计划是，一旦用户提交表单，然后将输入添加到json文件（json服务器）中，不知道我将如何执行此操作，但是看到有一些文档说明如何使用fetch进行操作。但是，棘手的是，如何使用fetch显示json文件中的最后一个条目？我知道我可以使用-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;