javascript - 如何修复 React 中的 "Element type is invalid: expected a string ... but got: object"错误

Question

我正在使用 React.js 前端和 Node.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);
     });