在ReactJs中将useEffect（）与选项卡一起使用

Question

我有下一个代码：

null

js prettyprint-override">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>;
};

null

如何注意到inner组件内部，我得到了一个道具。我的问题是下一个：为什么当我更改选项卡时，单击每个选项卡，我会在useEffect中获得正确的数据console.log（d,“ss”）；，但如果我在同一个选项卡上单击两次，我在console中没有获得值？即使我添加了依赖项，也会发生这种情况。如何在控制台中每次获得值，甚至在同一个选项卡上点击两次？
演示：https://codesandbox.io/s/basic-antd4151-forked-swj43？file=/inner.js:142-267

Answer 1

您可能希望使用onTabClick而不是useEffect