React Native数组索引渲染组件时组件复用异常问题咨询

最近开始学习React Native，遇到一个搞不懂的问题：用数组索引渲染数组里的组件时，React Native会把新组件和旧组件当成同一个。

具体场景是我做了个步骤器，把多个组件存在数组里，传给一个组件后通过切换数组索引来显示不同步骤的内容。功能能跑，但有个奇怪的问题：比如索引0的组件是包含两个TextInput的View，当切换到索引1（同样是两个TextInput的View）时，如果之前聚焦了索引0里的第二个TextInput，切换后索引1的第二个TextInput也会自动聚焦。这是为啥？

Stepper 组件 #

enum STEPPER_ACTIONS {
  SET_NEXT_STEP = 'SET_NEXT_STEP'
}

const Stepper = (
  { steps = [] },
  ref: React.Ref<unknown>
): JSX.Element => {

const [stepper, updateStepper] = useReducer(
    (state, action) => {

      const newStepper = { ...state };

      switch (action.type) {

        case STEPPER_ACTIONS.SET_NEXT_STEP:
          if (newStepper?.activeStep < steps.length) {
            newStepper.visitedSteps.push(newStepper.activeStep);
            newStepper.activeStep += 1;
          }

          return {
            ...newStepper,
          };
      }
    },

    {
      visitedSteps: [],
      activeStep: 0,
    }

  );

  useImperativeHandle(ref, () => ({

    nextStep: () => updateStepper({ type: STEPPER_ACTIONS.SET_NEXT_STEP }),
    
  }));
  
  return (
    <View>
      {steps[stepper?.activeStep]?.content}
    </View>
  );
};

export default forwardRef(Stepper);

SignUpScreen 组件 #

function SignUpScreen({ navigation, route }: any): JSX.Element {
  const stepperRef = useRef(null);

  const [user, updateUser] = useReducer(
    (state, action) => {
      const newState = { ...state };
      switch (action.type) {
        case SIGN_UP_ACTIONS.SET_SURNAME:
          return {
            ...newState,
            surname: action?.payload,
          };
        case SIGN_UP_ACTIONS.SET_PHONE:
          return {
            ...newState,
            phone: action.payload,
          };
        case SIGN_UP_ACTIONS.SET_NAME:
          return {
            ...newState,
            name: action?.payload,
          };
        case SIGN_UP_ACTIONS.SET_PASSWORD:
          return {
            ...newState,
            password: action.payload,
          };
     
      }
      return newState;
    },
    {
      phone: '',
      password: '',
      name: '',
      surname: '',
     
    }
  );
  


    const steps = [
        {
          content: FirstStep(updateUser, user)
        },
        {
          content: SecondStep(updateUser, user)
        }
    ];

  return (
    <View>
      <Stepper
        ref={stepperRef}
        steps={steps}
      />

      <Pressable
        onPress={() => stepperRef?.current?.nextStep()}
      />
    </View>
  );
}

export default SignUpScreen;

FirstStep 组件 #

function FirstStep(
  updateUser,
  user
): JSX.Element {

  return (
    <View>

      <TextInput
        onChangeText={(value)=>updateUser({
            type: SIGN_UP_ACTIONS.SET_NAME,
            payload: value,
        })}
        value={user?.name}
        placeholder="Name"
      />
      <TextInput
        onChangeText={(value)=>updateUser({
            type: SIGN_UP_ACTIONS.SET_SURNAME,
            payload: value,
        })}
        value={user?.surname}
        placeholder="Surname"
      />
    </View>
  );
}
export default FirstStep;

SecondStep 组件 #

function SecondStep(
  updateUser,
  user
): JSX.Element {

  return (
    <View>

      <TextInput
        onChangeText={(value)=>updateUser({
            type: SIGN_UP_ACTIONS.SET_PASSWORD,
            payload: value,
        })}
        value={user?.password}
        placeholder="Password"
      />
      <TextInput
        onChangeText={(value)=>updateUser({
            type: SIGN_UP_ACTIONS.SET_PHONE,
            payload: value,
        })}
        value={user?.phone}
        placeholder="Phone"
      />
    </View>
  );
}
export default SecondStep;

SIGN_UP_ACTIONS 枚举 #

export enum SIGN_UP_ACTIONS {
  SET_NAME = 'SET_NAME',
  SET_SURNAME = 'SET_SURNAME',
  SET_PHONE = 'SET_PHONE',
  SET_PASSWORD = 'SET_PASSWORD',
}

核心原因 #

React（包括React Native）通过key识别组件唯一性，当你用数组索引作为隐式key时，切换步骤时React会判定前后位置的组件是同一个，只会更新props而非重新创建组件实例。

对应到你的场景：

• 步骤0和步骤1的组件结构完全一致（两个TextInput），React会复用之前的组件实例，包括TextInput的聚焦状态。
• 你直接调用FirstStep(...)这种组件函数的写法，会导致每次渲染都生成新的JSX元素，但因为索引作为key的复用逻辑，React还是会保留原生视图的状态。

解决方法 #

方法1：给步骤组件添加唯一key

在Stepper组件渲染时，为当前步骤的内容添加唯一key，强制React重新创建组件：

// 修改Stepper组件的return部分
return (
  <View>
    {React.cloneElement(steps[stepper?.activeStep]?.content, {
      key: stepper.activeStep
    })}
  </View>
);

也可以给每个步骤定义专属id，用id作为key提升稳定性：

// SignUpScreen中修改steps数组
const steps = [
  {
    id: 'signup-step-1',
    content: <FirstStep updateUser={updateUser} user={user} />
  },
  {
    id: 'signup-step-2',
    content: <SecondStep updateUser={updateUser} user={user} />
  }
];

// Stepper组件渲染部分
return (
  <View>
    {React.cloneElement(steps[stepper?.activeStep]?.content, {
      key: steps[stepper.activeStep].id
    })}
  </View>
);

方法2：切换步骤时主动清除聚焦

调用nextStep前，用Keyboard.dismiss()关闭键盘，清除所有输入框的聚焦状态：

// SignUpScreen中修改Pressable的 onPress 逻辑
import { Keyboard } from 'react-native';

<Pressable
  onPress={() => {
    Keyboard.dismiss();
    stepperRef?.current?.nextStep();
  }}
/>

方法3：改用JSX语法传递组件

不要直接调用组件函数，改用JSX语法传入组件，让React正确管理组件实例：

// SignUpScreen中修改steps数组
const steps = [
  {
    content: <FirstStep updateUser={updateUser} user={user} />
  },
  {
    content: <SecondStep updateUser={updateUser} user={user} />
  }
];

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