Ant Design Mobile RN 中 PickerView 组件状态保持问题解析

问题背景

在使用 Ant Design Mobile RN 的 PickerView 组件时，开发者经常遇到一个常见问题：当用户选择某个选项后关闭选择器，再次打开时选择器会重置到初始状态，而不是停留在上次选择的选项位置。这种行为影响了用户体验的连贯性。

核心概念：受控组件

PickerView 是一个典型的受控组件（Controlled Component），这意味着它的状态完全由父组件通过 props 控制。与不受控组件不同，受控组件不会自己维护内部状态，所有状态变化都需要通过父组件传递的属性来驱动。

解决方案原理

要让 PickerView 记住上次选择的位置，开发者需要：

1. 在父组件中维护一个状态变量来存储当前选中的值
2. 将这个状态通过 value 属性传递给 PickerView
3. 在 onChange 回调中更新这个状态

具体实现示例

import React, { useState } from 'react';
import { PickerView } from 'antd-mobile-rn';

const MyPicker = () => {
  const [selectedValue, setSelectedValue] = useState(['value1']); // 初始值
  
  const data = [
    { label: '选项1', value: 'value1' },
    { label: '选项2', value: 'value2' },
    // 更多选项...
  ];

  return (
    <PickerView
      value={selectedValue}
      data={data}
      onChange={(value) => setSelectedValue(value)}
    />
  );
};

关键注意事项

1. value 属性必须：如果不传递 value 属性，PickerView 会使用内部默认状态，导致无法保持选择状态。

2. 数据类型匹配：确保 value 属性的数据结构与 data 中的 value 字段类型一致。

3. 多列选择器：对于多列选择器，value 应该是一个数组，每个元素对应一列的选中值。

4. 性能优化：对于大数据量的选择项，考虑使用 PureComponent 或 React.memo 来避免不必要的重渲染。

进阶技巧

1. 持久化存储：如果需要跨会话保持选择状态，可以将选中的值保存到 AsyncStorage 或其他持久化存储中。

2. 默认值处理：在组件挂载时可以从持久化存储中读取上次选择的值作为初始状态。

3. 表单集成：当与表单一起使用时，确保表单的初始值设置与 PickerView 的 value 属性同步。

常见问题排查

如果发现状态仍然无法保持，检查以下方面：

1. 是否在每次渲染时都重新初始化了 value 状态
2. 是否在父组件中意外重置了状态
3. onChange 回调是否正确更新了状态
4. 是否有多处状态管理导致冲突

通过正确理解和使用受控组件的概念，开发者可以轻松实现 PickerView 选择状态的持久化，从而提供更好的用户体验。