如何在reacthooks和redux中只获取一次数据并且不再获取数据

Question

请问当我使用 React Hooks 在 React 组件中来回移动时，如何只获取一次数据而不再获取数据。我只是希望它的方式是，一旦在组件中第一次获取数据，就不应该再次获取。在 React hooks 中使用空数组 [ ] 将使组件每次我们再次移动到组件时都会获取一次数据。这是在reacthooks 中使用的示例代码，仅获取一次数据。我只想一次获取数据，即使从页面/组件转换到组件时也不再重复。在页面之间导航时，这两个链接仅获取一次数据。谢谢并希望收到大家的来信 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]);

Answer 2

如果我理解正确，您希望 useEffect 回调仅在第一次渲染时触发一次。

要实现该行为，您可以将空数组传递给 useEffect() 的第二个参数，如下所示：

const fetchData = async () => {
const result = await axios(url);
setData(result.data);
};
fetchData();
}, []); /* <-- do this */```