React Native切换Dropdown值时子组件状态未重置问题

问题场景 #

使用RNPickerSelect切换Flight和Car子组件时，从Flight切到Car再切回Flight，Airline输入框的内容依然保留，状态没有重置。之前尝试给Airline组件添加navigation的focus/blur监听无效。

核心原因 #

1. RNPickerSelect切换子组件时，未被选中的Flight组件只是被隐藏而非卸载，因此组件内部的useState状态（比如routes）会一直保留修改后的值，不会自动重新初始化。
2. 你之前用的navigation监听无效，因为这里是同一页面内的组件切换，并非路由跳转，所以navigation的focus/blur事件不会触发。

解决方案 #

方案1：通过key强制Flight组件重新挂载（推荐） #

在父组件中，给Flight组件绑定与选中类型关联的key，当切换类型时，key值变化会触发组件重新挂载，从而重置所有内部状态。

父组件示例代码：

import React, { useState } from 'react';
import RNPickerSelect from 'react-native-picker-select';
import Flight from './Flight';
import Car from './Car';

const ParentComponent = () => {
  const [selectedType, setSelectedType] = useState('flight');

  return (
    <>
      <RNPickerSelect
        onValueChange={(value) => setSelectedType(value)}
        items={[
          { label: 'Flight', value: 'flight' },
          { label: 'Car', value: 'car' }
        ]}
        value={selectedType}
      />
      {selectedType === 'flight' && <Flight key={selectedType} />}
      {selectedType === 'car' && <Car />}
    </>
  );
};

export default ParentComponent;

当selectedType从flight切换到car再切回时，Flight组件会重新挂载，routes状态会回到初始的[initialRoute]，输入框内容自然重置。

方案2：监听激活状态手动重置状态 #

如果需要保持Flight组件不卸载（比如有缓存需求），可以在父组件传递激活状态给Flight，然后在Flight内部监听状态变化手动重置。

1. 父组件传递isActive属性：

{selectedType === 'flight' ? (
  <Flight isActive={true} />
) : (
  <Flight isActive={false} />
)}

2. Flight组件内添加useEffect监听：

import React, { useState, useEffect } from 'react';

const Flight = ({ isActive }) => {
  const [routes, setRoutes] = useState<IRoute[]>([initialRoute]);

  useEffect(() => {
    // 当组件从激活变为非激活时，重置状态
    if (!isActive) {
      setRoutes([initialRoute]);
    }
  }, [isActive]);

  // ...原有渲染代码
};

export default Flight;

额外修正：修复setFieldValue的state修改方式 #

你的setFieldValue函数直接修改了state中的对象，属于React禁止的直接突变操作，可能导致状态更新异常，建议修正为返回新对象：

export const setFieldValue = (
  value: string,
  field: string,
  id: number,
  routes: IRoute[],
  setRoutes: (updatedRoutes: IRoute[]) => void
): void => {
  const updatedRoutes = routes.map(rt => {
    if (rt.id === id) {
      // 创建新对象，不修改原state对象
      return { ...rt, [field]: value };
    }
    return rt;
  });
  setRoutes(updatedRoutes);
};

内容的提问来源于stack exchange，提问作者coder03