useState 钩子渲染完整视图并影响数组数据

Question

我是 React Native 的初学者。

我正在创建一个 React Native 应用程序。我想使用此应用程序捕获多张图像。当用户捕获图像时，它将存储在一个数组中（const tempArray = [];），同样，所有图像都应存储在其中。 Sametime 我需要在应用程序的一侧显示图片的预览。为此，我使用了 react useState (const [selectedFiles, setSelectedFiles] = useState([])) 挂钩。一旦用户捕获图像，它将存储在我的数组中，使用我正在更新 useState 挂钩的数组。当 useState 挂钩更新时，它将再次呈现视图，并使用上次捕获的图像重置我的数组。

我在这里附上了我的代码，请帮我找到解决办法。谢谢。

const [modalVisible, setModalVisible] = useState(false);

const tempArray = [];
const [selectedFiles, setSelectedFiles] = useState([]);

const chooseFile = () => {
    const options = {
        title: 'Select an option',
        storageOptions: {
            skipBackup: true,
            path: 'images',
        },
    };

    ImagePicker.showImagePicker(options, (response) => {
        // console.log('Response = ', response);
        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else {
            // let source = response;
            // You can also display the image using data:
            let source = {
                uri: 'data:image/jpeg;base64,' + response.data
            };
            createImageArray(source);
        }
    });
};

const createImageArray = (imageData: string) => {
    console.log("stored item : " + imageData);
    tempArray.push(imageData);
    setSelectedFiles(tempArray);
    console.log("tempArray.length : " + tempArray.length);
}

UI应该是这样的,

Answer 1

也许你应该将图像转换为 base64，然后像这样显示它们：

<Image
  source={{
    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

Example from ReactNative docs

Answer 2

这是可以为您提供帮助的代码。场景是我从本地存储获取图像，然后将它们推送到阵列。

 const [images , setImages] = useState([])
 let image_array = data.filter((elem, index) =>elem.endsWith('.jpg')) // here i am getting imaegs fom an array by filtering . you didn't need this. after you get an images just push that to the array
          let temp_image_array = []
          image.forEach((child) =>{
             temp_image_array.push({
                 name:child // Here child is the uri of image 
             })
          })
          setImages(i_items);  // after that you can update your status.

useState 钩子渲染完整视图并影响数组数据

useState hook renders the complete view and affects to the array data

react-native

imagepicker