爬坑！！antd中select组件的defaultValue取不到数据问题

爬坑！！antd中select组件的defaultValue相关问题

需求一：是这样的，想要在下拉菜单的框里首先显示一个默认值，默认下拉菜单的第一项，而不是placeholder。

但是由于下拉菜单是请求回来的数据，因为你不能在页面渲染的时候就直接展示出数据，所以有了一个解决办法！使用key！！！让key值等于defaultValue的值。

const [activites, setActivites] = useState([]);
...
useEffect(() => {
	setActivites([
            {
                title: '活动53',
                value: 'ac53',
            },
            {
                title: '活动75',
                value: 'ac75',
            },
            {
                title: '活动1',
                value: 'ac1',
            },
        ]);
},[]);
return (
	<Select
		defaultValue={activites[0]?.value}
	    key={activites[0]?.value}
	    onChange={handleChange}
	    style={{width: 200}}
	>
	    {activites && activites.map(item => {
	    	return (<Option key={item.value} value={item.value}>{item.title}</Option>);})
	    }
	</Select>
);

此时就可以框里面就可以显示默认值了！

但是，我又遇到了一个新的问题，就是在我想取这个默认值，拿着默认值去请求数据的时候，取不到值，原因就是我们使用的useState是异步的，我们在setActivites之后打印activities得到的是旧制，也就是初始的[]。

useEffect(() => {
	setActivites([
            {
                title: '活动53',
                value: 'ac53',
            },
            {
                title: '活动75',
                value: 'ac75',
            },
            {
                title: '活动1',
                value: 'ac1',
            },
        ]);
        console.log(activities, '=============activities');  // []
},[]);

但是我就想拿到初始值怎么办？？因此就来了需求二。

需求二：拿到下拉菜单的默认值去请求数据。

对于这个问题，我也找到了解决办法，就是使用ref，这应该是最简单也是最好理解的解决办法啦！

const activitesRef = useRef([]);
...
useEffect(() => {
	activitesRef.current = [
            {
                title: '活动53',
                value: 'ac53',
            },
            {
                title: '活动75',
                value: 'ac75',
            },
            {
                title: '活动1',
                value: 'ac1',
            },
        ];
},[]);
return (
	<Select
		defaultValue={activitesRef.current[0]?.value}
	    key={activitesRef.current[0]?.value}
	    onChange={handleChange}
	    style={{width: 200}}
	>
	    {activitesRef.current && activitesRef.current.map(item => {
	    	return (<Option key={item.value} value={item.value}>{item.title}</Option>);})
	    }
	</Select>
);

get到啦～～