Средство выбора изображений - сохранение uri с помощью крючка

#reactjs #react-native #react-redux #expo

#reactjs #react-native #реагирование-сокращение #выставка

Вопрос:

У меня небольшая проблема с сохранением моего uri изображения, которое я выбрал в своем приложении react native.

Следующий пример кода имеет решающее значение:

 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 amp;amp; modalVisible == false){
        setUserBio("Useless Placeholder");
    };

Как вы можете видеть, у меня есть 2 журнала консоли для проверки моего результата. Я хочу сохранить image.uri в свой хук, который я объявил в верхней части своего профиля. Проблема в том, что я получаю в качестве вывода в моей консоли:

Исходные данные: file:/data/user/0/host.exp.exponent/cache/ExperienceData/%40kubaguette%2FPigeonBuddy/ImagePicker/30953995-840b-451e-a505-6082df16b9e3.jpg Данные из hook имеют значение: null

Почему здесь setPickedImage(image.uri) не работает? Почему я могу console.log использовать uri выбранного изображения, но не могу сохранить этот uri в моем перехвате и извлечь его?

1. takeImageHandler — это асинхронная функция, которая сохраняет значение выбранного изображения в замыкании. После установки консоли в метод рендеринга вместо метода takeImageHandler и проверки.

Ответ №1:

setPickedImage поскольку любой метод, который обновляет состояние, является асинхронным по своей природе.

Если это единственная проблема, вы можете отслеживать изменения с useEffect помощью .

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

Вы можете увидеть разницу здесь: https://codesandbox.io/s/usestate-async-rnzox?file=/src/App.js