时间戳

首页 > 解决方案 > React Native 博览会。较早创建变量并稍后使用它

reactjs - React Native 博览会。较早创建变量并稍后使用它

问题描述

我正在使用 react native expo 创建移动应用程序。我想事先创建一个变量，然后再使用它。请参阅下面的注释代码。我在下面的关键行添加了评论：-

export default function bar () {

        let result;            // create variable early

        // ...

        const pick = async () => {
        
                result = await ImagePicker.launchImageLibraryAsync({   // use variable later
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                allowsEditing: true,
                quality: 1,
            });
        }

        pick();


    return (
    <Image source={{ uri: result.uri }} />    // Use later
    );

}

pick();但是我的应用程序在它再次开始构建时崩溃了。为什么我的应用程序崩溃pick();？result我相信我对变量做错了什么？

注意：我不想使用钩子。我不想使用像useEffect或这样的钩子useState

标签： reactjsreact-nativeexpo

解决方案

试试这个方法

export default function bar() {
  let result; // create variable early

  // ...

  const pick = async () => {
    result = await ImagePicker.launchImageLibraryAsync({
      // use variable later
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });
  };

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    pick();
  });

  return result ? <Image source={{ uri: result.uri }} /> : null;
}

推荐阅读