如何获得我的API请求以获取更新的数据库?

时间:2019-09-17 01:33:13

标签: javascript reactjs api express axios

第一次,一切,所以先谢谢。

我试图获取的是,以便当我更改“数据库”(我将在下面解释报价)时,API请求也会自动更新。目前,当我更改“数据库”时,API请求仍只在检索旧数据。

const express = require("express");
const app = express();

const workoutPlan = {
  ID: 1,
  Name: "My Workout Plan - Update"
};

app.get("/api/workout-plan", function(req, res) {
  res.json(workoutPlan);
});

app.listen(3001, () => console.log(`Server listening on port 3001`));

这就是我的“数据库”。

然后使用clickHandler,我要求提供名称。

import React from "react";
import Workout from "./Workout";
import axios from "axios";

class WorkoutPlan extends React.Component {
  constructor() {
    super();
    this.state = {
      workoutPlan: {}
    };

    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    axios
      .get("/api/workout-plan")
      .then(response => this.setState({ workoutPlan: response.data }));
  } 



  render() {
    const { workoutPlan } = this.state;
    // const workoutPlan = this.state.workoutPlan;

    return (
      <div>
        <h1>{workoutPlan.Name}</h1>
        <button className="button" onClick={this.handleClick}>
          Click Me
        </button>
        <Workout />
      </div>
    );
  }
}

export default WorkoutPlan;

此刻,单击按钮会正确填充“我的锻炼计划-更新”,但是如果我将自己的const trainingPlan中的内容更改为“我的锻炼计划-没有更新”,则单击该按钮仍会检索“我的锻炼计划-更新”。

让我知道我可以做些什么来使这一点更加清晰/容易!

2 个答案:

答案 0 :(得分:0)

我认为您已经从url获得了缓存的内容。您可以尝试在URL中添加附加随机查询或添加标头{'Cache-Control':'no-cache'},以防止缓存数据。 考试:/ api / workout-plan?random = 12312312。

答案 1 :(得分:0)

每次更改服务器时,都需要重新启动Express应用程序。在执行此操作之前,服务器仍将使用旧的常量。

在开发过程中,您可能需要考虑options to make this automatic。过去,我使用nodemon取得了一些成功。我敢肯定,还有很多其他选择。