今天下午，同事又遇到了一个奇怪的 Bug，这次是在 Fusion 组件库中的 DatePicker2 组件上。简单描述如下：有两个日期选择框，分别是开始日期和结束日期，先点击结束日期选择框，随便选择一个日期，提示选择失败，并提示“请先选择开始日期”，然后这时结束日期并不会成功选择，因为在 onChange 事件中会判断开始日期是否已经选择，如果没有选择则不会更新结束日期。但是这个时候，开在选择开始日期，选择成功后，再次选择结束日期，重点是并不需要选择具体日期，而是将弹框打开，再关闭，这时结束日期就会成功选择了。而选择的日期是第一次选择失败的那个日期。

复现问题#

打开 Fusion 官网，找到 DatePicker2 组件，然后在尺寸大小示例中修改代码如下：

function Demo() {
	const [first, setFirst] = React.useState('');
	const [second, setSecond] = React.useState('');
	return (
		<div>
			<DatePicker2 value={first} onChange={(_, str) => {
				setFirst(str);
			}} />
			<DatePicker2 value={second} onChange={(_, str) => {
				if (!first) {
					return;
				}
				setSecond(str);
			}} />

		</div>
	);
}
ReactDOM.render(<Demo />, mountNode);

先选择第二个日期选择框，然后选择一个日期，会提示选择失败，然后选择第一个日期选择框，选择一个日期，再次选择第二个日期选择框，不选择具体日期，只是打开弹框，然后关闭，这时选择成功。

这样就可以复现这个问题了。

分析问题#

这个问题看起来很奇怪，第一次选择日期并不会成功，但是第二次选择日期就会成功，而且选择的日期是第一次选择失败的日期。这个问题看起来很像是一个状态更新的问题，因此我认为可能是因为 DatePicker2 组件在第一次选择失败是内部保存了这个结果，导致第二次选择日期时尽管没有选择具体日期，但是内部直接使用了第一次选择失败的日期。而我在 DatePicker2 组件文档中并没有重置状态的方法，因此我是用 key 来强制更新组件，这样就可以解决这个问题。

解决方案#

function Demo() {
	const [first, setFirst] = React.useState('');
	const [second, setSecond] = React.useState('');
	return (
		<div>
			<DatePicker2 value={first} onChange={(_, str) => {
				setFirst(str);
			}} />
            {/*  使用 key 强制刷新组件  */}
			<DatePicker2 key={Date.now()} value={second} onChange={(_, str) => {
				if (!first) {
					return;
				}
				setSecond(str);
			}} />

		</div>
	);
}
ReactDOM.render(<Demo />, mountNode);