react-activation 在组件间传递 props 时丢失状态

[ysh199882]

描述 在使用 react-activation 的 KeepAlive 组件时，组件间传递的 props 丢失，导致组件不能正确恢复状态。以下是一个最小化的示例重现了这个问题。

重现步骤 安装依赖： bash 复制代码 npm install react react-dom react-activation @arco-design/web-react dayjs ahooks 创建以下文件： App.tsx TaskBoardCondition.tsx 使用上述代码创建应用并运行。 在页面中切换选项，查看状态是否正确保存。 期望行为 使用 KeepAlive 组件时，组件的状态和传递的 props 应该正确保留。

实际行为 组件状态和传递的 props 丢失，导致组件不能正确恢复状态。

Minimal Demo 安装依赖 bash 复制代码 npm install react react-dom react-activation @arco-design/web-react dayjs ahooks App.tsx jsx 复制代码 import React from 'react'; import ReactDOM from 'react-dom'; import { AliveScope } from 'react-activation'; import TaskBoardCondition from './TaskBoardCondition';

function App() { return (

); }

ReactDOM.render(, document.getElementById('root')); TaskBoardCondition.tsx jsx 复制代码 import React, { useEffect } from 'react'; import { Radio, Space, DatePicker, Button, Grid, Select, Input } from '@arco-design/web-react'; import { useSafeState } from 'ahooks'; import { KeepAlive } from 'react-activation'; import dayjs from 'dayjs';

const DateRangePicker = DatePicker.RangePicker;

const dateOptions = [ { label: '今天', value: 'today' }, { label: '昨天', value: 'yesterday' }, ]; const dateOptionsMap = { today: 0, yesterday: 1 };

function TaskBoardCondition() { const [selectedDay, setSelectedDay] = useSafeState(dateOptions[0].label); const [valueRange, setValueRange] = useSafeState([]);

const handleDateChange = value => { setSelectedDay(value); };

return (

数据时间 option.label)} value={selectedDay} onChange={handleDateChange} /> setValueRange(date)} />

); }

export default TaskBoardCondition;