Инициализация реакции-кроппера из API
Я использую пакет react-cropper для создания веб-сайта.
import React from 'react';
import Cropper from 'react-cropper';
...
export default MyComponent() {
...
const [imageSrc, setImageSrc] = useState(null);
const [cropper, setCropper] = useState(null);
....
useEffect(() => (
....
const profile = api.get('/profile');
setImageSrc(profile.src);
....
), [])
return (
...
<Cropper
style = {{ height: 400, width: '100%' }}
guides = {false}
initialAspectRatio = {16 / 9}
src = {previewImage}
ref = {(crop) => setCropper(crop)}
/>
...
)
}
Здесь, когда я использую путь статического изображения в useEffect, я вижу инициализированное изображение.
setImageSrc("https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg);
Но когда я загружаю изображение из API, я не вижу инициализированного изображения.
Надеюсь на ваше сотрудничество.
Ответы 1
Я думаю, что api.get() — это асинхронная функция, и когда вы устанавливаете состояние imageSrc, profile — это просто отложенное обещание, а profile.src — это undefined. Если вы установите для своего состояния значение undefined, вы не увидите инициализированное изображение.
Чтобы решить эту проблему, вы можете либо использовать промисы, либо async/await. Посмотрите фрагмент ниже, где я оборачиваю метод API get в асинхронную функцию и использую await для ожидания результата, прежде чем он будет передан в setImageSrc:
useEffect(() => (
// ....
const fetchProfile = async () => {
const profile = await api.get('/profile');
setImageSrc(profile.src);
};
fetchProfile();
// ....
), [])