从外部 json 值获取更新，而无需刷新整页

Question

我有一个定期更新的"status.json">文件...我的目标是读取此值并显示仅更新文本的 React 应用程序......我遇到了问题，因为每当文件更新时，页面整个更新都会导致无限加载循环

状态.json

{
"data": { "value": 15 } 
}

反应应用程序

import React, { useEffect, useState } from 'react'
function myData() {
const[json, setJson] = useState(require('./status.json'));
useEffect(() => {
setJson(require('./status.json')); 
},[]);
return (
<div class="container">
{json.data.value}
</div>
);
}
export default myData

刷新循环：

刷新循环动图

Answer 1

import React, { useEffect, useState } from 'react'
function myData() {
const[json, setJson] = useState(require('./status.json'));
/*
useEffect(() => {
setJson(require('./status.json')); 
},[json]);  // it causes infinite loop
*/
//ComponentDidMount
useEffect(()=>{
setJson(require('./status.json'));
},[]);
return (
<div class="container">
{json.data.value}
</div>
);
}
export default myData