Question

我有一个自定义钩子，用于获取许多组件使用的本地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/MyOtherComponent/MyOtherComponent.js

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

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

我的组件的行为相同，这是因为我将相同的en字符串发送到了两者中的useContent()钩子。 useEffect() 应该仅在lang参数更改时运行，因此，鉴于两个组件都使用相同的en字符串，useEffect()应该仅运行一次，但不是-运行多次。这是为什么？如何更新我的钩子，使其仅在lang参数更改时获取？

Answer 1

挂钩在不同的组件（以及相同组件类型的不同实例）中独立运行。因此，每次在新组件中调用useContent时，效果（获取数据）都会运行一次。（按照React的承诺，相同组件的重复渲染将不会重新获取数据。）相关：React Custom Hooks fetch data globally and share across components?

在许多组件之间共享状态的一般React方法是使用Context钩子（useContext）。有关上下文here的更多信息。您想要类似的东西：

const ContentContext = React.createContext(null)

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

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

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

这样，如果您想更新内容/语言/其他内容，则可以在应用程序级别（或您认为有意义的更高级别）上进行。

如何仅在React自定义挂钩中获取数据一次？

1 个答案: