组件开发

function C001({ foo }: { foo: string; }) {
	interface IData {
		field1: string;
		field2: string;
	};
	const [data, setdata] = useState<IData[]>([]);
	useEffect(() => {
		function callinitservice() {
			// 这里我们模拟一个异步的初始化服务调用的过程
			return new Promise<IData[]>((res) => {
				res([{
					field1: 'v11',
					field2: 'v12'
				}, {
					field1: 'v21',
					field2: 'v22'
				}]);
			});
		}
		void (async () => {
			const result = await callinitservice();
			setdata(result);
		})();
	}, []);
	return <>
		<div>{foo}</div>
		<ul>
			{data.map((it, key) => {
				const content = `字段1:${it.field1};字段2：${it.field2}`;
				return <li key={key}>{content}</li>;
			})}
		</ul>
		<input type='button' onClick={(e) => {
			// 用户点击事件
			alert('you have clicked me!');
		}} />
	</>;
}