组件重新渲染导致应用程序崩溃 - Expo

Question

我正在学习react-native/expo，我在这个问题上停留了几个小时。

因此，当我输入任何内容时，整个页面都会重新呈现。我知道这一点，因为在代码中我上传了一个图像，并且在控制台中我看到了图像 uri。因此，当我打字时，我会一次又一次地看到它，直到应用程序崩溃。

Jsfiddle代码

我在这里上传了整个代码，因为它太长了。

流程是 - 填写表格 - 如果需要上传图片 - 按确认按钮

我尝试使用

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([]); // State to store captured images

// Function to handle image capture
  const handleCaptureImage = useCallback(async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      alert('Camera permission is required to take pictures.');
      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) {
        // Add the new image URI to the images state
        setImages(prevImages => [...prevImages, result.assets[0].uri]);
      }
    } catch (error) {
      console.error('Error capturing image:', error);
    }
  }, []);

  const handleChange = useCallback((name, value) => {
    setFormData({ ...formData, [name]: value });
  }, [formData]);
 return (
    <KeyboardWrapper>
    <View style={styles.container}>
      <View style={styles.form}>
      <TextInput
        placeholder="Sofer 1"
        value={formData.driverName1}
        onChangeText={(text) => handleChange('driverName1', text)}
        style={styles.textInput}
      />
     {/* Display captured images */}
      <View style={styles.formImgs}>
        {images.map((imageUri, index) => (
          <View key={index} style={styles.img}>
              {console.log('Image 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}>Scaneaza</Text>
            </View>
          </TouchableOpacity>
          </View>
      </View>
    </View>
    </KeyboardWrapper>
  );
};

Answer 1

问题出在handlechange上，它应该是这样的

const handleChange = (event) => {
    setname(event.target.value);
  }