Closed ysh199882 closed 3 months ago
描述 在使用 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 (
export default TaskBoardCondition;
描述 在使用 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 (
); }
export default TaskBoardCondition;