React项目中，Antdesign的Tab组件，状态更新，视图没有更新问题

修改前：

import React, { useEffect, useState } from 'react';
import { Button,Tabs } from 'antd';

const App: React.FC = () => {
  interface A{
    label: string,
    key: string,
    children: JSX.Element,
  }
  const [num,setNum]=useState(0)
  const [content,setContent]=useState<A[]>([
    {
      label: 'Tab 1',
      key: '1',
      children: <div>{num}<div onClick={()=>changeNum()}>你好呀！</div></div>,
    }
  ])
  const changeNum=()=>{
    setNum(num+3)
  }
  return (
    <>
        <Tabs
            defaultActiveKey="1"
            items={content}
        />
        <div>
            {num} --- <Button type="primary" onClick={()=>setNum(num+1)}> Log in </Button>
        </div>
    </>
  );
};

export default App;

在这段代码中，num 状态变量的值发生变化，但视图没有更新。这可能是因为在渲染组件时，子组件 Tabs 的 items 属性接收的是一个状态变量 content 的引用，而 content 本身并没有发生变化。为了解决这个问题，可以在 setContent 中使用函数式更新来确保每次更新 num 时，content 也会重新计算。 

修改后：

import React, { useEffect, useState } from 'react';
import { Button,Tabs } from 'antd';

const App: React.FC = () => {
  interface A{
    label: string,
    key: string,
    children: JSX.Element,
  }
  const [num,setNum]=useState(0)
  const [content,setContent]=useState<A[]>([
    {
      label: 'Tab 1',
      key: '1',
      children: <div>{num}<div onClick={()=>changeNum()}>你好呀！</div></div>,
    }
  ])
  const changeNum=()=>{
    setNum(num+3)
  }
  useEffect(()=>{
    setContent((prevContent) => [
      {
        ...prevContent[0],
        children: (
          <div>
            {num}
            <div onClick={() => changeNum()}>你好呀！</div>
          </div>
        ),
      },
    ]);
  },[num])
  return (
    <>
        <Tabs
            defaultActiveKey="1"
            items={content}
        />
        <div>
            {num} --- <Button type="primary" onClick={()=>setNum(num+1)}> Log in </Button>
        </div>
    </>
  );
};

export default App;

在修改后的代码中，我们使用 useEffect 钩子监听 num 的变化，并在 num 变化时更新 content 的值，以确保视图能够正确更新。