Question

我正在使用Node.js后端在React.js前端中工作，我正在尝试创建一个允许用户上传图像，然后将该图像显示在用户家中的图库中的应用程序页。我遇到的问题是图库组件中的错误，该错误说：“元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但是得到了：对象”，我可以似乎找不到它的来源，我也不真正理解它的含义。

我尝试注释掉不同的代码段，但是错误仍然相同。

前端图库中的当前组件是：

import React, { Component } from 'react';
import axios from "axios";
import ReactGallery from 'react-photo-gallery';
import Lightbox from 'react-images';
import { loadAuthToken } from "../local-storage";

export default class Gallery extends Component {
    constructor(props){
        super(props);
        this.state = {
            images : [],
            currentImage: 0,
            lightboxIsOpen: false
        };
    }

    componentDidMount() {
        console.log("auth");
        axios({
          method: "GET",
          url: "http://localhost:8080/api/images/",
          headers: { authorization: `Bearer ${loadAuthToken()}` }
        }).then(response => {
          this.setState({
            images: response.data
          });
        });
      }

    openLightbox(event, obj) {
        this.setState({
            currentImage: obj.index,
            lightboxIsOpen: true,
        });
    }
    closeLightbox() {
        this.setState({
            currentImage: 0,
            lightboxIsOpen: false,
        });
    }
    gotoPrevious() {
        this.setState({
            currentImage: this.state.currentImage - 1,
        });
    }
    gotoNext() {
        this.setState({
            currentImage: this.state.currentImage + 1,
        });
    }

    render() {
        let photos = this.state.images.map(image => {
            return {
                src : '/api/images' + image.uri,
                width : image.width,
                height : image.height,
                id :  image.id
            }
        });
        if (!this.state.images.length) return null; 
        return (
            <div className="gallery">
                {this.state.images.length ?
                    <ReactGallery
                        photos={photos}
                        onClick={this.openLightbox.bind(this)}
                    />
                    :
                    <div className="no-images">
                        <h5 className="text-center">
                            You currently have no images in your photos gallery
                        </h5>
                    </div>
                }

                <Lightbox images={photos}
                          onClose={this.closeLightbox.bind(this)}
                          onClickPrev={this.gotoPrevious.bind(this)}
                          onClickNext={this.gotoNext.bind(this)}
                          currentImage={this.state.currentImage}
                          isOpen={this.state.lightboxIsOpen}/>
            </div>

        );
    }
}

完整的前端在这里：https://github.com/beccaww/cats-client

后端在这里：https://github.com/beccaww/cats

我希望用户上传的是图片库，而不是错误消息。有没有人可以弄清该错误及其含义？

Answer 1

在第24行：您正在使用response.data，它为您提供json对象，并且您已将图像状态设置为采用数组。解决console.log（response.data）并检查所需的json对象值，然后更新图像状态。

axios({
          method: "GET",
          url: "http://localhost:8080/api/images/",
          headers: { authorization: `Bearer ${loadAuthToken()}` }
     }).then(response => {
          console.log(response.data);
     });

如何修复React

1 个答案: