尝试从Spring Boot API在React App中打印列表时出现错误

Question

我有一个React应用，我试图从我创建的spring api中打印出一个称为taglocations的对象列表。我不断收到错误，我也不知道为什么。我收到“抱歉！加载项目时出错。”我的taglocationlist.js文件中有错误。该api是正确的并且有效。也许是我尝试渲染对象的方式？请帮忙。

index.js文件

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import TaglocationList from './components/TaglocationList';

const store = configureStore();

render(
    <Provider store={store}>
        <TaglocationList />
    </Provider>,
    document.getElementById('app')
);

configurestore.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

taglocations.js（reducer）

export function  taglocationsHasErrored(state = false, action) {
    switch (action.type) {
        case 'TAGLOCATIONS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

export function  taglocationsIsLoading(state = false, action) {
    switch (action.type) {
        case 'TAGLOCATIONS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

export function taglocations(state=[], action){
    switch (action.type){
    case 'TAGLOCATIONS_FETCH_DATA_SUCCESS':
        return actions.taglocations;

        default:
            return state;
    }
}

rootreducer文件

import { combineReducers } from 'redux';
import { taglocations, taglocationsHasErrored, taglocationsIsLoading } from './taglocations';

export default combineReducers({
    taglocations,
    taglocationsHasErrored,
    taglocationsIsLoading
});

taglocationlist.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { taglocationsFetchData } from '../actions/taglocations';

class TaglocationList extends Component {
    componentDidMount() {
        this.props.fetchData('http://localhost:9080/api/taglocations');
    }


    render() {
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }

        return (
                <ul>
                    {this.props.taglocations.map((taglocation) => (
                        <li key={taglocation.taglocationid}>
                            {taglocation.rfidtag}
                        </li>
                    ))}
                </ul>
            );
        }
    }

TaglocationList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    taglocations:PropTypes.array.isRequired,
    hasErrored: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        taglocations: state.taglocations,
        hasErrored: state.taglocationsHasErrored,
        isLoading: state.taglocationsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(taglocationsFetchData(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(TaglocationList);

taglocations.js（操作）

export function taglocationsHasErrored(bool) {
    return {
        type: 'TAGLOCATIONS_HAS_ERRORED',
        hasErrored: bool
    };
}

export function taglocationsIsLoading(bool) {
    return {
        type: 'TAGLOCATIONS_IS_LOADING',
        isLoading: bool
    };
}

export function taglocationsFetchDataSuccess(taglocations) {
    return {
        type: 'TAGLOCATIONS_FETCH_DATA_SUCCESS',
        taglocations
    };
}

export function taglocationsFetchData(url) {
    return (dispatch) => {
        dispatch( taglocationsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.error);
                }

                dispatch(taglocationsIsLoading(false));
                console.log("response", response.data);
                return response;
            })
            .then((response) => response.json())
            .then((taglocations) => dispatch(taglocationsFetchDataSuccess(taglocations)))
            .catch(() => dispatch(taglocationsHasErrored(true)));
    };
}