1

我在 material-ui 中有一个<Tabs />组件，它有一个用于更改模式的处理程序。on change 有这个签名（来自链接）：

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

我的实现有点像这样：

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

但我注意到，变化最大的东西，新模式不是部门的一部分，因此可能无法正常运行？然后我从我最黑暗的梦境中召唤出这个怪物：

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

一路回调。

以前，这个问题（React hooks useCallback with parameters inside loop）建议不要useCallback在这种情况下使用。但由于这是可以一遍又一遍地调用的东西，它似乎是这样做的地方。此外useMemo，我想依赖传递给钩子的变量的例子也没有解决，我什至认为它在这个例子中不起作用（例如，我使用错误的钩子，以及不知道如何将它用于我的示例）。

我该如何解决这个问题？

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

4

1 回答 1

1

你问：

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

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

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

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

在你的情况下，你得到newMode一个函数的参数。因此，您不需要将其添加为依赖项。

于 2020-01-10T12:48:18.670 回答