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

问题现象

在使用 Ant Design Mobile RN 的 PickerView 组件时，开发者遇到了一个常见问题：当用户选中某个选项后关闭选择器，再次打开时，选择器会重置到第一个选项，而不是保持在用户上次选择的位置。

问题本质

这个问题的核心在于组件状态管理方式的选择。PickerView 组件作为受控组件(Controlled Component)，其显示状态完全由外部传入的 value 属性决定。如果开发者没有正确维护这个状态，就会导致每次打开选择器时都恢复到初始值。

解决方案

1. 受控组件原理

在 React 中，受控组件是指其状态完全由父组件控制的组件。对于 PickerView 来说：

• 显示的值由 value 属性决定
• 值变化时通过 onChange 回调通知父组件
• 父组件需要维护这个状态并在下次渲染时回传给 PickerView

2. 实现步骤

要解决这个问题，开发者需要：

1. 在父组件中定义一个状态变量来保存当前选中的值
2. 将这个状态作为 value 属性传递给 PickerView
3. 在 PickerView 的 onChange 回调中更新这个状态

3. 代码示例

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

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

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

进阶技巧

1. 多列选择器状态保持

对于多列选择器，原理相同，只需维护一个包含各列选中值的数组：

const [selectedValues, setSelectedValues] = useState(['value1', 'valueA']);

// 数据格式
const data = [
  [
    { label: '选项1', value: 'value1' },
    { label: '选项2', value: 'value2' },
  ],
  [
    { label: '子项A', value: 'valueA' },
    { label: '子项B', value: 'valueB' },
  ]
];

2. 与表单集成

当 PickerView 作为表单的一部分时，可以将选中值存储在表单状态中，确保表单提交时能获取到用户的最新选择。

3. 性能优化

对于大数据量的选择器，可以考虑使用 React.memo 或 useMemo 来优化性能，避免不必要的重新渲染。

常见误区

1. 直接修改 PickerView 内部状态：试图通过 ref 等方式直接操作组件内部状态，这违背了 React 的数据流原则。

2. 忽略初始状态设置：忘记设置初始状态或设置不匹配的初始值，导致组件行为异常。

3. 状态提升不足：将状态保存在不合适的组件层级，导致状态无法在需要时被正确访问。

总结

Ant Design Mobile RN 的 PickerView 组件作为受控组件，要求开发者显式地管理其状态。通过正确理解和使用 React 的状态管理机制，可以轻松实现选择器状态的持久化，为用户提供连贯的交互体验。记住，关键在于维护好 value 状态并在组件重新渲染时正确传递它。