如何正确地将网址分配给动作创建者 [英] How to properly assign a url as a prop to action creator
问题描述
我正在使用react-native-image-crop-picker和react-native-fetch-blob从相机胶卷中抓取图像,然后将其保存到Firebase存储桶中。
I'm using react-native-image-crop-picker along with react-native-fetch-blob to grab an image from the camera roll and then save it to a Firebase storage bucket.
class CreateForm extends Component {
componentWillMount() {
this.setState({ loading: false });
}
// RNFetchBlob and RNImageCropPicker working together to store an
// image in firebase, and then returning a url for that image.
openImage() {
this.setState({ loading: true });
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob
//const uid = "12345"
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: true,
mediaType: 'photo',
}).then(image => {
const imagePath = image.path;
let uploadBlob = null;
const storage = firebase.storage();
const storageRef = storage.ref();
const imageRef = storageRef.child('dp.jpg');
const mime = 'image/jpg';
fs.readFile(imagePath, 'base64')
.then((data) => {
//console.log(data);
return Blob.build(data, { type: `${mime};BASE64` });
})
.then((blob) => {
uploadBlob = blob;
return imageRef.put(blob, { contentType: mime });
})
.then(() => {
uploadBlob.close();
return imageRef.getDownloadURL();
})
在以下代码段之前,一切都完美运行:
Everything works perfectly until this bit of code:
.then((url) => {
console.log(url);
this.props.entryUpdate({ prop: 'image', url });
});
});
}
它记录的URL很好。但是,当我尝试将此URL作为名为 image的道具分配给动作创建者 entryUpdate时,Firebase实时数据库会得到一个未定义的对象,并引发错误。
It logs the url just fine. But when I try to assign this url as a prop named 'image' to the action creator 'entryUpdate', the Firebase realtime database gets an undefined object and throws an error.
以下是动作创建者 entryUpdate:
Here's the action creator 'entryUpdate':
export const entryUpdate = ({ prop, value }) => {
return {
type: ENTRY_UPDATE,
payload: { prop, value }
};
};
没有图像属性,一切都将正确执行。因此,我知道我不会以某种方式为动作创建者提供正确的语法。
Without the 'image' prop, everything executes correctly. So I know that I'm not giving the action creator the right syntax somehow. The
this.props.entryUpdate({ prop: 'image', url });
行必须是完全错误的。任何帮助将不胜感激!
line has to be just plain wrong. Any help would be so appreciated!
推荐答案
问题是您正在错误地破坏传递给动作创建者的对象,({道具,值}}
基本上是从要传递的对象中获取属性。 prop
是正确的,因为作为参数传递的对象具有 prop
键,并以 image作为值。但是 value
是未定义的,因为 value
不是作为参数传递的对象上的已定义键。改用 url
是正确的,应该可以解决您的问题:
The problem is you're destructuring the object being passed into the action creator incorrectly, ({ prop, value })
is basically grabbing the properties from the object being passed through. prop
is correct because the object being passed as an argument has a prop
key with 'image' as the value. value
however is undefined because value
is not a defined key on the object passed as an argument. Using url
instead would be correct and should fix your issue:
export const entryUpdate = ({ prop, url }) => {
return {
type: ENTRY_UPDATE,
payload: { prop, url } // or { prop, value: url } if you dont want to edit your dispatcher.
};
};
这篇关于如何正确地将网址分配给动作创建者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!