时间戳

首页 > 解决方案 > 将 json 数据从 API 访问到前端 Reactjs

reactjs - 将 json 数据从 API 访问到前端 Reactjs

问题描述

我想制作一个应用程序，在您的保险到期时提醒您，并且我想访问我的数据库中的数据以制作编辑表单并用这些数据填充字段。我在 InsurancesController 中有这个功能：

public function edit($insurance)
{
    $insurance = Insurance::whereId($insurance)->first();

    return response() -> json([
        'insurance' => $insurance
    ]); 
}

我有这条路线：

<Route path="/:id/edit" exact render={props => (
     <EditInsurance {...props} insurances={this.state.insurances} />)}
 />

我有这个组件，只是为了测试：

import React, { Component } from "react";

class EditInsurances extends Component {
  render() {
    const { insurances } = this.props;
    return (
      <div>
        <p>Hello</p>
        {insurances.map(insurance => (
          <p>{insurance.id}</p>
        ))}
      </div>
    );
  }
}

export default EditInsurances;

如何仅访问我要编辑的保险？

编辑

这是我使用邮递员时得到的：reminderapi.test/api/insurances/5/edit：

{
    "insurance": {
        "id": 5,
        "user_id": 1,
        "tip": "Asigurare",
        "date_exp": "1975-12-28",
        "date_notif": "2006-06-19",
        "note": "Vitae dolorem corporis impedit eligendi laborum quidem.",
        "created_at": "2019-03-11 09:49:23",
        "updated_at": "2019-03-11 09:49:23"
    }
}

标签： reactjslaravelapi

解决方案

您可以从要编辑的保险的路线 ID 中获取。

然后遍历所有保险并与路线中的 ID 进行比较。

class EditInsurances extends Component {
  render() {
    const { insurances } = this.props;
    // get from url-route ID 
    const insuranceId = this.props.match.params.id;

    const insurance = insurances.map(insurance => insurance.id === insuranceId)

    return (
      <div>
        <p>Hello</p>
        {insurance}
      </div>
    );
  }
}

推荐阅读