时间戳

首页 > 解决方案 > 如何重新渲染反应组件取决于文件？

javascript - 如何重新渲染反应组件取决于文件？

问题描述

我有一个存储对象数组的文件。我有一个组件从这个文件中获取数据然后呈现列表。该文件可以在其他地方更新，如果文件被修改，我需要更新组件。我有以下代码示例

const header = () => {
  const [list, setList] = useState([]);
  
  // fetch 
  useEffect(() => {
    const loadList = async () => {
      const tempList = await getList("/getlist"); // get call to fetch data from file
      setList(tempList);
    };
    loadList ();
  }, [list]);

  // function to render content
  const renderList = () => {
    return list.map(obj => (
      <div key={obj.name}>
        {obj.name}
      </div>
    ));
  };
  
  return (
    <div>{renderList()}</div>
  )
}

// get call
router.get('/getlist', 
  asyncWrapper(async (req, res) => {
    const result = await getList();
    res.status(200).json(result).end();
  })
);

const getList= async () => {
  const list = JSON.parse(await fs.readFile(listPath));
  return list;
}

代码已被简化。如果我从 useEffect 中删除列表，那么它只会呈现一次并且永远不会更新，除非我刷新页面。如果我在那里包含列表， loadList() 将不断被调用，并且组件将一次又一次地重新渲染。这不是我想要的行为。我只是想知道没有制作标头组件异步组件，如何仅在文件更改时重新渲染该组件？

非常感谢。

标签： javascriptreactjsreact-hooks

解决方案

您可以采取两种方法来解决这个问题：

轮询

每隔一段时间请求 URL，并在组件卸载时清除它。

替换loadList ()为：

const interval = setInterval(loadList, 60000); // Adjust interval as desired
return () => clearInterval(interval)

确保响应中设置的缓存控制标头/getlist不会阻止浏览器注意到更新。

服务器推送

删除您当前的代码以获取数据并使用 websockets 替换它，可能通过 Socket.IO。（有很多关于使用 Socket.io 和 React 的教程可以在 Google 上找到，但它涉及的内容太多，无法成为 SO 答案的一部分）。

推荐阅读