如何在React中缓存jQuery ajax结果？
许多人问如何在React中禁用jquery ajax缓存，而我的问题则不同。我希望它被缓存，或者更准确地说，将我第一次使用ajax调用时获得的属性保存在浏览器内存中或其他任何地方，这样它就不会再次调用REST api。
下面是我的代码：
import React from 'react';
import $ from 'jquery';
export default class ActivityIndex extends React.Component {
constructor(props) {
super(props);
this.state = {
activities: [],
};
}
componentDidMount() {
const source = 'http://api.my.com/activities';
this.serverRequest = $.get(source, (result) => {
this.setState({
activities: result,
});
});
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
let rows = [];
this.state.activities.forEach((element) => {
rows.push(
<div key={element.act_id}>
<div>{element.act_id}</div>
<div>{element.act_title}</div>
</div>
);
});
return <div>{rows}</div>;
}
}每次我单击返回到此页面时，它都会再次调用ajax。我相信这是因为在componentDidMount方法中我调用了ajax。也许我应该把它放在别的地方？或者如何缓存ajax结果，以便下次进入此页面时不会调用ajax？
回答 2
Stack Overflow用户
发布于 2016-09-07 16:38:38
基于关于本地存储的评论。您可以在加载数据的过程中构建对本地存储的检查，如果检查结果为空，则运行ajax请求。
componentDidMount() {
const source = 'http://api.my.com/activities';
// Check for data you need and either get the data from API
// or use the data in local storage.
const data = localStorage.getItem('data');
if (!data) {
$.get(source, (result) => {
this.setState({
activities: result,
});
localStorage.setItem('data', data);
});
} else {
this.setState({
activities: data,
});
}
}您可以将此逻辑分解为它自己的函数，并将其放入它自己的模块中，或者使用不同的生命周期方法。但是，这遵循您当前的模式。
请注意，如果要存储字符串以外的任何内容，则可以使用名为localForage的npm库。或者，您可以将返回结果转换为字符串以存储在localStorage中。See here for a recent q&a on this topic.
Stack Overflow用户
发布于 2016-09-07 17:35:52
根据alexi2的回答，我做了一些修改。也许对其他用户有用。注意JSON.stringify和JSON.parse，因为localstorage只能存储字符串，不能直接存储object：
import React from 'react';
import $ from 'jquery';
export default class ActivityIndex extends React.Component {
constructor(props) {
super(props);
const data = localStorage.getItem('activityindex');
if (data) {
this.state = {
activities: JSON.parse(data),
};
} else {
this.state = {
activities: [],
};
}
}
componentDidMount() {
const data = localStorage.getItem('activityindex');
if (!data) {
const source = 'http://api.my.com/activities';
this.serverRequest = $.get(source, (result) => {
this.setState({
activities: result,
});
localStorage.setItem('activityindex', JSON.stringify(result));
});
}
}
componentWillUnmount() {
if (this.serverRequest) {
this.serverRequest.abort();
}
}
render() {
let rows = [];
this.state.activities.forEach((element) => {
rows.push(
<div key={element.act_id}>
<div>{element.act_id}</div>
<div>{element.act_title}</div>
</div>
);
});
return <div>{rows}</div>;
}
}https://stackoverflow.com/questions/39364825
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号