Question

我试图创建一个使用cloudinary上传图片的地方，一切正常但我不确定如何检查图像是否处于状态因为我得到了：

＆＃39;无法阅读财产＆＃39; secure_url＆＃39;未定义＆＃39;

secure_url是一个属性，在cloudinary返回的对象上有一个图片网址。

国家

this.state = {
            toDo: [],
            loggedIn: false,
            images: []
        }

ComponentDidMount (Uploaded image)

    componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
        if(user) {
            let userId = firebase.auth().currentUser.uid;

            let dbRef = firebase.database().ref(`notes`);
            dbRef.on("value", (dataObj) => {
                let toDoArr = [];
                let imagesArr = [];
                let dataObjValue = dataObj.val();
                let displayName = user.displayName;
                for(var prop in dataObjValue) {
                    let uploadedImage = dataObjValue[prop][0];
                    dataObjValue[prop].key = prop;
                    dataObjValue[prop].displayName = user.displayName;
                    toDoArr.push(dataObjValue[prop]);
                    imagesArr.push(uploadedImage);
                }

                this.setState({
                    toDo: toDoArr
                });

                this.setState({
                    loggedIn: true
                })

                this.setState({
                    images: imagesArr
                })
            });
        } else {
            this.setState({
                loggedIn: false
            })
        }
    })
}

上传图片方法

imageUpload(files) {
        const image = files[0];
        const cloudName = 'xxxx';
        const url = 'https://api.cloudinary.com/v1_1/'+cloudName+'/image/upload';
        const timestamp = Date.now()/1000;
        const uploadPreset = 'xxxx';
        const paramsStr = 'timestamp='+timestamp+'&upload_preset='+uploadPreset+'xxxxx';
        const signature = sha1(paramsStr);
        const params = {
            'api_key': xxxxx,
            'timestamp': timestamp,
            'upload_preset': uploadPreset,
            'signature': signature
        }

        let uploadRequest = superagent.post(url);
        uploadRequest.attach('file', image);

        for(let key in params) {
            uploadRequest.field(key, params[key]);
        }

        uploadRequest.end((err, res) => {
            if(err) {
                alert(err);
            }

            const uploaded = res.body;

            let imagesArr = [];

            let userId = firebase.auth().currentUser.uid;
            const dbRef = firebase.database().ref(`notes`);

            if(imagesArr.length === 0) {
                imagesArr.push(uploaded);
                dbRef.push(imagesArr);
            }

            if(imagesArr.length >= 1) {
                imagesArr.splice(0, uploaded);
                dbRef.remove();
                dbRef.push(imagesArr);
            }
        });
    }

通过数组映射

    uploadedImage = (
        this.state.images.map((image, i) => {
            return (
                <img className="avatar" key={`image-${i}`} src={image.secure_url} alt={image.orginal_filename}/>
            );
        })
    );

Answer 1

这是错误

let uploadedImage = dataObjValue [prop] [0]

此代码返回的部分或全部元素未定义。反应中没有魔力。尝试记录所有图像并检查哪些图像未定义

最后你将undefined推送到images array

React - 无法读取属性＆＃39; secure_url＆＃39;未定义的

1 个答案: