【发布时间】:2020-01-17 20:17:48
【问题描述】:
第一次,所以提前谢谢。
我试图让当我更改我的“数据库”(我将在下面解释引用)时,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 锻炼计划中将其更改为“我的锻炼计划 - 无更新”,单击该按钮仍会检索“我的锻炼计划 -更新”。
让我知道我可以做些什么来帮助使这更清晰/更容易!
【问题讨论】:
标签: javascript reactjs api express axios