反应组件无缘无故地不断获取和更新数据

Question

我有一个反应组件，我正在用它来获取数据以进行可视化。

数据获取不断发生，而不是只需要一次。我想知道是否有办法减少这种情况的发生。

组件是这样的，

export default function Analytics() {

  const {
    sentimentData,
    expressionsData,
    overall,
    handleChange,
    startDate,
    endDate,
    sentimentStatistical,
  } = useAnalytics();

  

  return (

我想知道我是否应该在这里将 componentDidMount() 之类的东西与 componentDidUpdate() 一起使用？

UseAnalytics 是另一个专门用来获取数据的组件，基本上就是一系列的获取。

站点上有不同的按钮可以更改请求的数据，因此我确实希望能够更改这些数据对象的状态/请求更多，即我根据日期过滤数据。但是不知道如何停止它只是不断地请求数据。

提前致谢，

更新以共享正在调用的函数。

export default function useAnalytics() {
  let d = new Date();
  d.setMonth(d.getMonth() - 1);
  const [dateRange, setDateRange] = useState([d.getTime(), Date.now()]);
  const [startDate, endDate] = dateRange;
  const { data: sentimentData } = useSWR(
    `dashboard/sentiment/get-sentiment-timefilter?startTime=${startDate}&endTime=${endDate}`,
    fetchSentiment
  );
  const { data: expressionsData } = useSWR(
    `dashboard/expression/get-expression-analytics?startTime=${startDate}&endTime=${endDate}`,
    apiRequest
  );
  return {
    sentimentData,
    expressionsData,
    overall,
    handleChange,
    setDateRange,
    sentimentStatistical,
    startDate,
    endDate,
  };
}

apirequest是这样的，

export async function apiRequest(path, method = "GET", data) {
  const accessToken = firebase.auth().currentUser
    ? await firebase.auth().currentUser.getIdToken()
    : undefined;
    //this is a workaround due to the backend responses not being built for this util.
  if (path == "dashboard/get-settings") {
    return fetch(`/api/${path}`, {
      method,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
      body: data ? JSON.stringify(data) : undefined,
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.error === "error") {
          throw new CustomError(response.code, response.messages);
        } else {
          return response;
        }
      });
  }
  return fetch(`/api/${path}`, {
    method,
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: data ? JSON.stringify(data) : undefined,
  })
    .then((response) => response.json())
    .then((response) => {
      if (response.status === "error") {
        // Automatically signout user if accessToken is no longer valid
        if (response.code === "auth/invalid-user-token") {
          firebase.auth().signOut();
        }

        throw new CustomError(response.code, response.message);
      } else {
        return response.data;
      }
    });
}

有了答案，

useEffect(()=>{
  // this callback function gets called when there is some change in the 
  // state variable (present in the dependency array)
},[state variable])

这似乎是正确的，我想知道如何在 useAnalytics 之外证实常量？

Answer 1

首先，您使用的是功能组件，这里您不能使用 ComponentDidMount() 或 ComponentDidUpdate()，因为它们只能在 class 组件中使用。您将不得不使用 useEffect() 但您没有提供任何额外的代码来了解这里的情况。

无论如何，如果您在获取数据时设置按钮点击状态并且它一次又一次地发生，这可能是因为您没有在 useEffect() 上使用第二个参数，该参数声明此 useEffect() 将仅运行当第二个参数改变时。

因此，为了回答您的问题，请将第二个参数传递给您在单击按钮时设置的 useEffect()。

useEffect(() => {
    //
}, [state])

Answer 2

根据您的代码，它是功能组件，您不能使用 componentDidMount() 和 componentDidUpdate() 方法，因为这些函数在 class 组件中使用。

如果你想防止不断更新组件，那么 class 和功能组件有不同的方法。

For Class 组件：仅在新旧数据不匹配时执行。此函数在旧值和新值之间进行比较。

componentDidUpdate(prevProps, prevState) { if (prevState.data !== this.state.data) { // Now fetch the new data here. } }
对于功能组件：这仅在先前状态更改时执行。

useEffect(() => { // your data }, [stateName])

Answer 3

在功能组件中，我们没有 componentDidMount() 或 componentDidUpdate ()，但我们可以通过使用 useEffect 反应钩子来解决同样的问题。为了实现 componentDidMount() 的功能，我们可以使用以下代码片段

useEffect(()=>{
 // this is the callback function that needs to be called only once (when the component has mounted) 
},[])

为了实现 componentDidUpdate() 的功能，我们可以使用以下代码片段

useEffect(()=>{
  // this callback function gets called when there is some change in the 
  // state variable (present in the dependency array)
},[state variable])

反应组件无缘无故地不断获取和更新数据

react component constantly fetching and updating data for no reason

javascript

reactjs

next.js

swr

更新以共享正在调用的函数。

有了答案，