Question

我正在尝试使用useCallback钩子，使用gatsby-intl插件更改语言，他们有一种方法（changeLocale()）可以用来更改默认语言。网站。尽管该解决方案有效，但我还是希望避免在JSX箭头功能中传递道具，因此我尝试使用useCallback钩子。

onClick={()=>switchLanguage(language.iso)}

这是我的组成部分：

import React, { useCallback, useState } from 'react';
import { changeLocale } from 'gatsby-plugin-intl';
import { useLanguages } from '../../../hooks/useLanguages';

export const LanguageSwitcher = (callback, deps) => {
  const languages = useLanguages();

  const switchLanguage = useCallback(language => changeLocale(language),[]);

  return <ul>
    {languages.map((language, index) => <li key={index} onClick={switchLanguage(language.iso)}>{language.name}</li>)}
  </ul>;

};

上面的代码创建了一个无限渲染，该代码是在switchLanguage函数上输入的，而无需单击它。

但是，如果我删除该参数，它可以按预期工作，但我不知道用户单击哪种语言。

  const switchLanguage = useCallback(()=> console.log('item clicked'),[]);

我还尝试过使用其他钩子，例如useState，但是它创建了太多渲染器。

如何将参数传递给useCallback？如果不可能的话，那将是最好的解决方法或方法？

Answer 1

onClick={switchLanguage(language.iso)} 调用 switchLanguage，并将其返回值设置为onClick，就像onClick = switchLanguage(language.iso)会在JSX之外一样。

要将参数绑定到它，可以使用包装函数：

onClick={() => switchLanguage(language.iso)}

...或bind，尽管它还会创建一个函数：

onClick={switchLanguage.bind(null, language.iso)}

但是：在您的示例中，使用useCallback可能不会带来太多好处。在这种情况下，您可能根本不需要switchLanguage：

import React, { useCallback, useState } from 'react';
import { changeLocale } from 'gatsby-plugin-intl';
import { useLanguages } from '../../../hooks/useLanguages';

export const LanguageSwitcher = (callback, deps) => {
  const languages = useLanguages();

  return <ul>
    {languages.map((language, index) => <li key={index} onClick={() => changeLocale(language.iso)}>{language.name}</li>)}
  </ul>;
};

如何在useCallback挂钩中传递参数？

1 个答案: