如何在 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并将其return值设置为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 挂钩中传递参数？

How to pass an argument in useCallback hook?

javascript

callback

reactjs

gatsby

react-hooks