我正在构建一个React组件(想一个按钮),单击该组件会发出网络请求。该组件可以在同一页面上多次呈现,但是网络请求只需要发生一次。因此,我要存储一个变量networkRequestWasMade
,以便在发出请求之前进行检查。
通常,我会找到一个公共父对象并将其包装在React的上下文机制中。但是,该组件将成为可重用组件库的一部分,该组件库将在许多应用程序中使用(考虑数百种),因此,我希望它不依赖特定的父组件或上下文来存储此值。我正在集思广益,这将是实现此目标的最佳方法。
一个非常简单的解决方案是将布尔值附加到window
对象:
function Button() {
const handleClick = () => {
if (!window.networkRequestWasMade) {
// ...make request...
window.networkRequestWasMade = true
}
}
return <button onClick={handleClick}>Click me!</button>
}
但是,我想知道是否有更好的模式。
最佳答案
尽量不要使用全局变量,这是一个坏习惯。您只需要将promise存储到变量中并仅在第一次时对其进行初始化。
这是使用axios进行http调用的示例
// util.js
let p;
function loadData() {
if (!p) {
p = axios.get('uri')
.then(response => result = response.data);
}
return p;
}
然后您的组件可以多次调用函数
loadData
,http调用将仅执行一次// Button.jsx
import { loadData } from './util'
function Button() {
const handleClick = () => {
loadData()
.then(data => {
// do what you want with the data
})
}
return <button onClick={handleClick}>Click me!</button>
}
也许http请求不是
GET
,并且您并不关心结果,但是您知道了。关于javascript - 为可重用的React组件存储全局变量的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60420051/