useState 钩子呈现完整视图并影响数组数据

如何解决useState 钩子呈现完整视图并影响数组数据

我完全是 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 应该是这样的，

解决方法

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

 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.

,

可能您应该将图像转换为 base64，然后像这样显示它们：

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

Example from ReactNative docs