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

我正在尝试使用

useCallback

钩子来更改使用插件的语言，他们有一个方法（

changeLocale（）

）可以用来更改站点的默认语言。我希望避免在JSX arrow的函数中传递道具，尽管解决方案正在运行，所以我尝试使用

useCallback

hook

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>;

};

我还尝试使用其他挂钩，如

useState

，但它会创建太多渲染

---

如何将参数传递给

useCallback

？如果不可能，那么哪种方法是最好的解决方法或方法？

onClick={switchLanguage（language.iso）}

调用

switchLanguage
，并将其返回值设置为
onClick
，就像
onClick=switchLanguage（language.iso）
在JSX之外一样

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

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

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

…或
绑定
，但它也创建了一个函数：

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

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

import React，{useCallback，useState}来自“React”；
从“gatsby plugin intl”导入{changeLocale}；
从“../../../hooks/useLanguages”导入{useLanguages}；
导出常量语言切换器=（回调，deps）=>{
const languages=useLanguages（）；
返回

{languages.map（（language，index）=>
changeLocale（language.iso）}>{language.name}
）}
；
};
感谢您的回复！是的，这是我的第一种方法，但我希望避免直接在JSX道具上绑定函数。我想我唯一的选择就是这样使用：
constswitchlanguage=（语言）=>changeLocale（语言）和呼叫切换语言
onClick
event@FerranBuireu-现在似乎是相当标准的做法。使用
useCallback
需要记住的是，每次组件呈现时，您仍然在重新创建函数，只是有时候您没有使用新函数。React钩子的一个基本假设似乎是创建函数非常非常快。（我知道现代引擎跨函数实例重用代码，因此基本上应该像创建对象一样。）@FerranBuireu-“我想我唯一的选择是使用类似这样的东西：`const switchLanguage=（language）=>changeLocale（language）；`and call switchLanguage onc”我不认为在这一点上有任何理由切换语言，是吗？或者它不仅仅是调用
changeLocale
？最好保持简单，直接绑定到JSX上，而不是创建一个无用的函数。谢谢你的大师班。@FerranBuireu-LOL，好像是。：-）很乐意帮忙！快乐编码。