如何在useCallback钩子中传递一个参数？

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，就像在JSX之外的onClick = switchLanguage(language.iso)一样。

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

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

...or 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>;
};