javascript const = \"filepath\" 用于 React 项目答案

【问题标题】：javascript const = "filepath" for react projectjavascript const = \"filepath\" 用于 React 项目
【发布时间】：2023-02-24 13:22:21
【问题描述】：

全面披露我已经对此进行了一些谷歌搜索，但我知道我可能没有提出正确的问题来找到我正在寻找的东西。

我正在使用在 Github 上找到的反应模板用于我打算用于搜索 json 文件的工作的内部应用程序。

参考链接 - Link

示例中的源文件是这样的：

const initialDetails = [
  {
    id: 1,
    imgPath: "/assets/img/1.png",
    name: "Jane Doe",
    email: "janedoe@gmail.com",
    address: "New Delhi, India",
  },
  {
    id: 2,
    imgPath: "/assets/img/2.png",
    name: "Mary Rosamund",
    email: "agra@rosie.com",
    address: "Tbilisi, India",
  },
  {
    id: 3,
    imgPath: "/assets/img/3.png",
    name: "Sherlock Watson",
    email: "irene@johnlock.com",
    address: "Baker Street, India",
  },
  {
    id: 4,
    imgPath: "/assets/img/4.png",
    name: "John Holmes",
    email: "mary@johnlock.com",
    address: "Baker Street, India",
  },
  {
    id: 5,
    imgPath: "/assets/img/5.png",
    name: "Mycroft Lestrade",
    email: "britishgovt@gmail.com",
    address: "London, India",
  },
];

export default initialDetails;

我想要的是相当于const initialDetails = "jsonFilePath"

我需要查询的文件每分钟更新一次。

执行此类功能的标准方法是什么？

正如我所说，我可能没有提出通过 Google 获得此解决方案所需的正确问题，所以这就是我来到这里的原因。

【问题讨论】：

标签： javascript html reactjs json

【解决方案1】：

要每分钟更新一次数据，您可以使用 useEffect 挂钩中的 setInterval 函数在设定的时间间隔后再次获取数据：

import { useState, useEffect } from 'react';

function App() {
  const [initialDetails, setInitialDetails] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('path/to/your/json/file.json');
      const data = await response.json();
      setInitialDetails(data);
    };

    fetchData();

    const interval = setInterval(() => {
      fetchData();
    }, 60000);

    return () => clearInterval(interval);
  }, []);

  return (
    // Your component JSX here, using initialDetails
  );
}

export default App;

在这个更新的代码中，我们使用 setInterval 每 60 秒调用一次 fetchData 函数，然后使用 useEffect 钩子的 return 语句清除组件卸载时的间隔。这将确保在安装组件时每分钟更新一次数据。

【讨论】：