Expo应用输入时组件重复渲染致崩溃，寻求解决方法

我正在学习React Native/Expo，遇到一个棘手问题：在输入框输入内容时，整个页面会持续重复渲染，通过控制台打印的图片URI可确认这一点，最终会导致应用崩溃。

应用流程为：填写表单→按需上传图片→点击确认按钮。我尝试过使用useCallback，但未能解决问题。

以下是最小复现示例（MRE）：

import React, { useState, useCallback } from 'react';
import { View, TextInput, Text, StyleSheet, TouchableOpacity, Image  } from 'react-native';
import KeyboardWrapper from '../KeyboardWrapper';
import * as ImagePicker from 'expo-image-picker';

const FormComponent = ({ onSave }) => {
  const [formData, setFormData] = useState({
    driverName1: '',
  });
  const [images, setImages] = useState([]); // 存储拍摄的图片

  // 处理图片拍摄
  const handleCaptureImage = useCallback(async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      alert('需要相机权限才能拍照。');
      return;
    }
  
    try {
      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: false,
        aspect: [16, 9],
        quality: 1,
      });

      if (!result.cancelled && result.assets.length > 0) {
        // 将新图片URI添加到images状态
        setImages(prevImages => [...prevImages, result.assets[0].uri]);
      }
    } catch (error) {
      console.error('拍照出错:', error);
    }
  }, []);

  const handleChange = useCallback((name, value) => {
    setFormData({ ...formData, [name]: value });
  }, [formData]);

  return (
    <KeyboardWrapper>
      <View style={styles.container}>
        <View style={styles.form}>
          <TextInput
            placeholder="司机1"
            value={formData.driverName1}
            onChangeText={(text) => handleChange('driverName1', text)}
            style={styles.textInput}
          />
         {/* 展示拍摄的图片 */}
          <View style={styles.formImgs}>
            {images.map((imageUri, index) => (
              <View key={index} style={styles.img}>
                  {console.log('图片URI:', imageUri)}
                <Image
                  source={{ uri: imageUri }}
                  style={{ width: 100, height: 100 }}
                />
              </View>
            ))}
          </View>
          <View style={styles.formAction}>
            <TouchableOpacity onPress={handleCaptureImage}>
              <View style={styles.btn}>
                <Text style={styles.btnText}>拍照</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </KeyboardWrapper>
  );
};

1. 修复handleChange的依赖与更新逻辑 #

当前handleChange依赖formData，每次输入内容时formData更新，useCallback会重新生成函数实例，导致TextInput的onChangeText属性变化，触发组件重复重渲染。改成函数式更新，无需依赖formData：

const handleChange = useCallback((name, value) => {
  setFormData(prevFormData => ({ ...prevFormData, [name]: value }));
}, []);

这样handleChange只会初始化一次，不会随formData变化而重建，从根源避免不必要的重渲染触发。

2. 移除渲染阶段的console.log #

你在图片渲染的map循环中加入了console.log('图片URI:', imageUri)，这会在每次组件渲染时执行，当图片数量较多时会产生大量日志，既影响性能，也会放大重复渲染的视觉感受。建议移除该行代码，或把日志打印移到handleCaptureImage的状态更新环节。

3. 优化列表元素的key值 #

避免使用数组索引作为key，如果图片URI是唯一的，直接用imageUri作为key，防止列表顺序变化时引发组件错误重渲染：

{images.map((imageUri) => (
  <View key={imageUri} style={styles.img}>
    <Image
      source={{ uri: imageUri }}
      style={{ width: 100, height: 100 }}
    />
  </View>
))}

4. 排查KeyboardWrapper组件 #

如果上述修改后问题仍存在，需要检查KeyboardWrapper内部是否有频繁触发重渲染的逻辑，比如不必要的状态更新、未优化的props传递等。

完成以上修改后，输入时的重复渲染问题应该能得到解决，避免应用崩溃。

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