修改前:
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 的值,以确保视图能够正确更新。