0
点赞
收藏
分享

微信扫一扫

useEffect的使用


例子

import { GridContent, PageContainer } from '@ant-design/pro-layout';
import { Card } from 'antd';
import React, { useEffect, useState } from 'react';

import ItemShow from './components/ItemShow';

export interface Props {
name: string;
}

const MyNavigation: React.FC<Props> = () => {
const arr = ['a', 'b', 'd', 'e', 'f', 'a', 'b', 'd', 'e', 'f', 'b', 'd', 'e', 'f'];

const [data, setData] = useState(
{ "success": true, "data": { "name": "liuyunshengsir" } }
);

const [count1, setCount1] = useState<number>(0)
const [count2, setCount2] = useState<number>(0)






//针对count1 产生了作用
useEffect(() => {
document.title = `You clicked ${count1} times`;
console.log(count1)
}, [count1]);






return (
<PageContainer>
MyDemo
<GridContent>
<Card bordered={false}>
useEffect的使用
<div>
<div style={{ marginBottom: 20 }} onClick={() => { setCount1(count1 + 1) }}>count1: {count1}</div>
<div style={{ marginBottom: 20 }} onClick={() => { setCount2(count2 + 2) }}>count2: {count2}</div>
</div>


{arr.map((item, index) => {
return (
<ItemShow key={index} name={item}>
{index}
</ItemShow>
);
})}
<ItemShow name={'222'}>1</ItemShow>
<ItemShow name={'222'}>1</ItemShow>
</Card>
</GridContent>
</PageContainer>
);
};

export default MyNavigation;


举报

相关推荐

0 条评论