在 ReactJs 中使用 useEffect() 和标签答案

【问题标题】：Use useEffect() with tabs in ReactJs在 ReactJs 中使用 useEffect() 和标签
【发布时间】：2021-04-13 14:54:44
【问题描述】：

我有下一个代码：

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      <Inner d={5} />
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      <Inner d={3455} />
    </TabPane>
    <TabPane tab="Tab 3" key="3">
      <Inner d={54} />
    </TabPane>
  </Tabs>
);

// Inner

export const Inner = ({ d }) => {
  React.useEffect(() => {
    console.log(d, "ss");
  }, [d]);
  return <div>{d}</div>;
};

你怎么能注意到Inner 组件内部我得到了一个道具。我的问题是下一个：为什么当我更改每个选项卡时单击每个选项卡，我都会使用正确的数据console.log(d, "ss");，但是如果我在同一个选项卡上单击两次，我不会在控制台中获得值？即使我添加了依赖项，也会发生这种情况。即使在同一个选项卡上单击两次，如何每次在控制台中获取一个值？
演示：https://codesandbox.io/s/basic-antd4151-forked-swj43?file=/Inner.js:142-267

【问题讨论】：

如果您在同一个选项卡上单击两次，您将不会更改名为 d 的道具，因此不会应用效果。
您能解释一下您要做什么吗？如果您想让console.log 工作，您必须更改变量d，因此如果变量d 更改，则将调用函数，因为变量没有更改，useEffect 只调用一次。
内部组件 useEffect 只会在挂载时触发一次。由于 d 属性永远不会改变，因此对于给定的内部组件，useEffect 不会再次触发。

标签： javascript reactjs

【解决方案1】：

你可能想用 onTabClick 代替 useEffect

onTabClick	Callback executed when tab is clicked function(key: string, event: MouseEvent)

【讨论】：