reactjs 如何在React自定义钩子中只获取一次数据？

unhi4e5o 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(121)

我有一个自定义钩子，它获取一个本地JSON文件，* 许多 * 组件都使用它。

hooks.js

export function useContent(lang) {
    const [content, setContent] = useState(null);

    useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;

        fetch(`/locale/${lang}.json`, { signal: signal })
            .then((res) => {
                return res.json();
            })
            .then((json) => {
                setContent(json);
            })
            .catch((error) => {
                console.log(error);
            });

        return () => {
            abortController.abort();
        };
    }, [lang]);

    return { content };
}

字符串

/components/MyComponent/MyComponent.js

import { useContent } from '../../hooks.js';

function MyComponent(props) {
  const { content } = useContent('en');
}

型

/components/Mycraft Component/Mycraft Component.js

import { useContent } from '../../hooks.js';

function MyOtherComponent(props) {
  const { content } = useContent('en');
}

型
我的组件的行为是相同的，因为我在两个组件中向我的useContent()钩子发送了相同的en字符串。useEffect() * 应该 * 只在lang参数改变时运行，所以看到两个组件使用相同的en字符串，useEffect()应该只运行 * 一次 *，但它没有-它运行多次。为什么？我如何更新我的钩子，使它只在lang参数改变时才读取？

reactjs

来源：https://stackoverflow.com/questions/59570594/how-do-i-fetch-data-in-a-react-custom-hook-only-once

1条答案

按热度按时间

zlhcx6iw1#

钩子在不同的组件中独立运行（以及在同一组件类型的不同示例中）。因此，每次在新组件中调用useContent时，都会运行一次效果（获取数据）。（正如React所承诺的那样，同一组件的重复渲染不会重新获取数据。）相关：React Custom Hooks fetch data globally and share across components?
在许多组件之间共享状态的一种通用React方法是使用上下文挂钩（useContext）。关于上下文here的更多信息。你需要这样的东西：

const ContentContext = React.createContext(null)

function App(props) {
  const { content } = useContent(props.lang /* 'en' */);
  return (
    <ContentContext.Provider value={content}>
      <MyComponent>
      <MyOtherComponent>
    </ContentContext>
  );
}

function MyComponent(props) {
  const content = useContext(ContentContext);
}

function MyOtherComponent(props) {
  const content = useContext(ContentContext);
}

字符串
这样，如果你想更新内容/语言/任何东西，你会在应用程序级别（或任何你认为有意义的更高级别）这样做。

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs 如何在React自定义钩子中只获取一次数据？

1条答案

相关问题

热门标签

最新问答