Reactjs 图像选择器-使用钩子保存uri

Reactjs 图像选择器-使用钩子保存uri,reactjs,react-native,react-redux,expo,Reactjs,React Native,React Redux,Expo,我在保存我在react本机应用程序中选择的图片的uri时遇到了一个小问题 以下代码示例至关重要: const ProfileScreen = props =>{ const [pickedImage, setPickedImage] = useState(null); const [modalVisible, setModalVisible] = useState(false); //State for visible Modal const [userBio,

我在保存我在react本机应用程序中选择的图片的uri时遇到了一个小问题

以下代码示例至关重要:

const ProfileScreen = props =>{
    const [pickedImage, setPickedImage] = useState(null);

    const [modalVisible, setModalVisible] = useState(false); //State for visible Modal
    const [userBio, setUserBio] = useState('Useless Placeholder'); //State for users text in the bio

    const verifyPermissions = async () => { //ask for permissions on iOS and Android
        const result = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        if (result.status !== 'granted'){
            Alert.alert("Insufficient permissions!", "You need to grant galery permissions to customise your profile picture!", [{text: "Got it."}]);
            return false;
        };
        return true;
    };

    const takeImageHandler = async () => { //function that opens up the camera
        const hasPermission = await verifyPermissions();
        if (!hasPermission){
            return;
        }
        const image = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            quality: 0.5,
            aspect: [16,16]
        });
        setPickedImage(image.uri);
        console.log("Data raw is: " + image.uri);
        console.log("Data from hook is: " + pickedImage);
    };

    if(userBio.length == 0 && modalVisible == false){
        setUserBio("Useless Placeholder");
    };
如您所见,我有两个控制台日志来检查结果。我想将image.uri保存到我在ProfileScreen顶部声明的钩子中。问题是我在控制台中得到的输出:

原始数据是: 文件:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540kubaguette%252fpigeonbddy/ImagePicker/30953995-840b-451e-a505-6082df16b9e3.jpg 来自钩子的数据为:null


为什么
setPickedImage(image.uri)
在这里不工作为什么我可以
控制台。记录所选图片的我的uri,但不将此uri保存到我的挂钩并检索它?
设置PickedImage
,因为任何更新状态的方法都是天生的

如果这是唯一的问题,您可以使用
useffect
跟踪更改

useffect(()=>{
console.log(pickedImage);
},[PickeImage]);

您可以在这里看到区别:

takeImageHandler是一个异步函数,它将pickeImage的值保留在闭包中。在render而不是takeImageHandler方法中设置console之后,请进行验证。再次感谢您的回答。我对异步和useffect的理解比使用钩子要好一点。