react ant desing pro联动及优雅的同步执行

最新推荐文章于 2024-01-04 20:52:51 发布

原创最新推荐文章于 2024-01-04 20:52:51 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #typescript

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用React的状态管理案例，通过定义类型化数据结构并利用useState和useEffect进行状态更新和副作用处理。展示了如何根据地区选择变化来动态加载城市列表，并自动设置默认选项。

type dataType = [{
	label: string;
	value: number;
}];
	const [areaData, setAreaData] = useState<dataType>([{label: 'default', value: 0}]);
	const [cityData, setCityData] = useState<dataType>([{label: '请先选择地区', value: 0}]);
	useEffect(() => {
		areaList().then((res) => {
			setAreaData(res.data)
		})
	}, []);

	const [area, setArea] = useState<number>();
	const [city, setCity] = useState();

	const handleAreaChange = (value: any) => {
		setArea(value);
		cityList({pid: value}).then(res => {
			new Promise((resolve => {
				resolve(res.data)

			})).then((res: any) => {
				setCityData(res)
				setCity(res[0].value)
			})
		})
	};
	const onCityChange = (value: any) => {
		setCity(value);
	};
	```