使用传入参数的回调

Question

我在 material-ui 中有一个<Tabs />组件，它有一个用于更改模式的处理程序。更改时具有以下签名(来自链接(：

签名：
function(event: object, value: any) => void
事件：回
调值的事件源：我们默认为子(数字(的索引

我的实现有点像这样：

<Tabs
value={mode}
onChange={handleChange}
/>
<Tab id="choice1" value="one" label="Choice 1" />
<Tab id="choice2" value="two" label="Choice 2" />
</Tabs>

我的handleChange函数只是一个类似 useState 的钩子周围的箭头 fn

const handleChangeMode = (event, newMode) => {
setMode(newMode);
}

为了避免每次都重新创建这个箭头fn，我尝试这样做：

const handleChangeMode = useCallback((event, newMode) => {
setMode(newMode);
}, [setMode]);

但我注意到，变化最大的是，新模式不是 deps 的一部分，因此可能不会正常运行？然后我从我最黑暗的梦中变出了这个怪物：

const handleChangeMode = useCallback((event, newMode) => {
useCallback(() => setMode(newMode), [setMode, newMode])();
}, [setMode]);

它一直都是回调。

之前，这个问题(React 钩子使用循环内参数的回调(建议在这种情况下不要使用useCallback。但是，由于这是可以一遍又一遍地调用的东西，因此似乎是这样做的地方。此外，带有useMemo的示例无法解决我想依赖传递到钩子中的变量的问题，我什至认为这在本例中不起作用(例如，我错误地使用了钩子，以及不知道如何在我的例子中使用它(。

如何解决此问题？

(编辑：事实上，我根本无法嵌套回调/备忘录钩子，所以最后一个代码示例不起作用，正如我所怀疑的那样(

Answer 1

你问：

但我注意到，变化最大的是，新模式不是 deps 的一部分，因此可能不会正常运行？

const handleChangeMode = useCallback((event, newMode) => {
setMode(newMode);
}, [setMode]);

答：不，此代码将正常运行。仅当您直接从组件中使用 props 时，才需要将 props 添加到依赖项中。例如：

const { mode } = props;
const handleChangeMode = useCallback((event) => {
setMode(mode);
}, [setMode, mode]);

在您的情况下，您将newMode为函数的参数。因此，您无需将其添加为依赖项。