如何在不渲染视图的情况下添加多个值以响应钩子

Question

我正在开发一个 React Native 项目。

我想在 useState 钩子中添加多个图像而不重新设置钩子的状态。

例如：我想使用相机捕获图像并使用文件路径更新挂钩（目前可以），然后我想通过相机捕获另一张图像并更新反应挂钩之前的值（需要之前的文件路径和新的文件路径）。

问题是当我尝试捕获新图像并更新 useState 时，useState 挂钩重新渲染视图，它会删除以前的文件路径并存储一个新的文件路径。

我遇到了这个问题，请帮助我找到解决方案。提前致谢。

 const tempArray = [];
    const [selectedFiles, setSelectedFiles] = useState([]);
            
    // capturing the image --------------
    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) {
           onsole.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) => {
        // adding file path to temp array -> to get the selected images
                    tempArray.push(imageData);
                    setImagesToHooks();
                    console.log("tempArray.length : " + tempArray.length);
                }
            
                const setImagesToHooks = () => {
                    const imagesArray = Array.from(tempArray).map((result) => result);
                    console.log('images : ' + JSON.stringify(imagesArray));
        // adding mapped array to state hook
                    setSelectedFiles(imagesArray);
                }

Answer 1

我找不到您使用的图像选择器。但我确实理解问题是关于更新数组的问题。

问题是您使用第二个变量来存储以前的文件路径，而您可以使用状态本身来访问以前的文件路径。

Es6 引入了spread operator 的新概念。 您可以通过此blog 了解有关此概念的更多信息。

代码参考：

    const App = () => {
      const [selectedFiles, setSelectedFiles] = useState([]);
      const chooseFile = () => {
        const options = {
          title: 'Select an option',
          storageOptions: {
            skipBackup: true,
            path: 'images',
          },
        };
        ImagePicker.showImagePicker(options, (response) => {
          if (response.didCancel) {
            console.log('User cancelled image picker');
          } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
          } else {
            let source = {
              uri: 'data:image/jpeg;base64,' + response.data,
            };
            setImagesToHooks(source);
          }
        });
      };
      const setImagesToHooks = (newImage) => {
        // This will update the array. Refer the blog link for more information.
        let imagesArray = [...selectedFiles, newImage];
        setSelectedFiles(imagesArray);
      };

      // Return your code below
      return <React.Fragment/>
    };

由于新的更新依赖于之前的状态，所以即使在重新渲染之后，状态也会保持不变并且之前的路径也会保留。

注意：我无法运行代码，因为没有提到图像选择器的包。

如果你需要，你可以使用下面提到的选择器来响应原生。

1. react-native-image-picker
2. react-native-document-picker