reactjs - 如何在 React hooks 和 redux 中只获取一次且不再获取数据

Question

请问，在使用 React Hooks 在 React 组件中来回移动时，我如何只获取一次数据并且不再获取数据。我只是希望它以这样一种方式，即一旦在组件中第一次获取数据，它就不应该再次获取。在 react 钩子(Hook)中使用空数组 [ ] 将使组件在每次我们再次移动到组件时获取一次数据。 这是 reacthook 中使用的示例代码，仅获取一次数据。 即使从页面/组件转换到组件时，我也只想获取一次数据，而不是再次获取数据。 这两个链接在页面之间导航时仅获取一次数据。谢谢并希望收到大家的来信 http://www.favesound.de/ http://soundredux.io/

useEffect(() => {
const fetchData = async () => {
const result = await axios(url);
setData(result.data);
};
fetchData();
}, [url]);

Answer 1

将 redux 存储数据设置为 null 或一些空值。 在发出请求之前，请检查您存储的是否已有数据。 这将确保只有一个请求。

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const Component = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);
};

useEffect(() => {
  if (data === null) {
    const fetchData = async () => {
      const result = await axios(url);
      dispatch({ type: "update-data", payload: result.data });
    };
    fetchData();
  }
}, [data]);